DEV Community: Shubh Sharma

How I Pivoted to Design (2025 Wrapped)

Shubh Sharma — Mon, 29 Dec 2025 08:46:18 +0000

TLDR

I found what I was good at in 2025, and then focused fully on it. Got a full-time job and completed 28 projects in 6months as a UI/UX Designer.

2024 Recap and 2025 Starting

I started my journey in 2023 as a CS student who wanted to be good Full-stack developer. Later in 2024 I continued this journey while also doing some designing as a hobby, Those who know me from starting knows that I used to design a lot of stuff for my Instagram page. I never realised that designing was a skill I was naturally good at.

2024 was all about my first internship opportunity at Kidjig Tech as a UIUX designer (May 2024 to October 2024) and I learned a lot in that internship opportunity. I worked as an intern for 6 months and then in last 3 months of 2024 I did freelancing as it was giving me more freedom and better pay as well.

January 2025, Started the year with my 3rd Freelance design money. I designed mobile apps and Website design for Piyush Sachdeva.

I was making around 100-150 USD per project at that time but I wasn't serious about design and was just doing it as a side hobby or a side thing as everyone was doing tech and coding stuff and were making really good money.

Feb to April

Completed my third semester exams of MCA and joined Kidjig again as a full-time Designer. Designed lots of apps and stuff there. Kidjig gave me a lot of room to learn and expand my skills in those 3 months.

A way forward

Left Kidjig to seek better opportunities, Gave 3 interviews with 100% Success rate in early stage startups but the pay wasn't that good so I continued freelancing. ($120-150 per project)

Path to something better

I gave my 4th semester exams (last semester) in May. Full month was gone in just giving stupid exams in college and overthinking about my future, but finally completed my exams.

After last exam I started reaching out to some of my connections on Twitter to connect with them and find some opportunities and then Hrithik (was already working there) connected me with an agency.

So In June I started doing some projects and earned around $350 per project (Clients loved those designs and the pay was good)

This was the turning point for me as I was enjoying what i was doing and also getting paid good. This is when I realised I could do designing as a full-time thing and make good money.

I was given a full-time offer from the agency and I signed the contract and NDA.

Pivot to design (July to Present)

This was the turning point for me financially and for my career as well. I stopped coding and started focusing on UI/UX design skills only. I started reading UIUX books, principles and more. I already knew wire-framing, prototyping, etc so this was a refresher on those skills.

In September and October around Diwali I was able to afford Macbook Air and iPhone from my own earned money, this was an investment as my old devices were already in a very bad situation.

Tbh I cant explain in words how grateful I am today for this opportunity, I have worked very hard in last 6 months and completed total 28 Projects including Mobile apps, Landing pages, Web apps and also social media ads design. I have worked 8-10 hours average and even on weekends to complete deadlines.

Some bad things that happened

My mother's health wasn't good this year but i tried my best to help her and provide her best treatment for her health. I was able to afford good healthcare for her without too much thinking.

What is Next?

I am writing this blog today on 29th December 2025 and tbh i am not sure what future awaits for me, as humans we can only hope for better but somethings that I have in mind which i want to do in 2026.

Want to travel with my friends and family
Focus more on health of myself and my family
Improve on my design skills even further
Buy my own bike

I still remember when i used to overthink at night what will be my future but now I just think about today. Thats all I have in mind for now.

Thankyou God, Figma and Internet. I will see you in 2026.

Best JavaScript One Liners that You Must Know

Shubh Sharma — Tue, 21 May 2024 15:37:41 +0000

Introduction

JavaScript offers powerful techniques that can be used to to do very complex tasks in one line, these can be called one-liners. These are short lines of code that can perform complex tasks, making your code compact.

Especially while working with react I am using these one liners a lot.

So, Let's Start! 🚀🚀🚀

Ternary Operators Instead of If/Else

Instead of using If/else you can use ternary operators.

Condition is described before question mark ? and then we put true value and then : colon and then false value.

Example:

let variable = condition ? 'hello' : 'bye';
// if condition is true then hello is assigned to variable
// otherwise bye is assigned

const age = 23;
let isAdult = age >= 18 ? "You're an adult" : "You're not an adult";
console.log(isAdult);

You can even use it for if / else if / else conditions making more chained and complex decisions in easier and shorter code.

// example
const age = 23;
let isAdult = age >= 13  // if 
    ? "You are a teenager!"  // assign this 
    : age >= 18  // else if 
    ? "You are over 18!"  // assign this 
    : age >= 60 // else if 
    ? "You are old!" // assign this 
    : "You are a kid!" // else

console.log(isAdult);

This is very much used in professional code when we want to execute something on the basis of some given conditions.

Printing values of an array

Instead of using a for loop we can use forEach() method with implicit return values.

const nums = [1, 2, 3, 4, 5, 6];
nums.forEach(num => console.log(num));

Where num is each element of the array being printed on console.

Filtering out values from an array

In a single line of code you can use filter() method to filter out values of an array.

Filter method creates a new array of filtered out values.

const nums = [1, 2, 3, 4, 5, 6];
const filteredNums = nums.filter(num => num % 2 == 0);

console.log(filteredNums);
// output: 2, 4, 6

Finding if a value exist or not in an array

const nums = [1,2,3,4,5]
const element = 19;

const isElementFound = nums.includes(element) ? "Yes" : "No"
console.log(isElementFound)
// output: No
// includes() returns boolean value: true/false

This above code assigns No in the variable since there is no 19 value in the nums array.

Transforming an array using map

Map method can be used to transform existing values of an array and then return those values in form of new array.

const nums = [1,2,3,4];
const squaredNums = nums.map(num => num * num);
console.log(squaredNums);

// output: 1, 4, 9, 16

"map() and filter() methods are the most used methods in react"

Getting the length of an array or string

const string = "Shubh"
const stringLen = string.length;
console.log(stringLen);

//output: 5

Getting values out of an object

We use destructuring syntax to get out those values from the object.

const object = { 
  w: 0, 
  x: 1, 
  y: 2, 
  nestedObject: { 
      z: 3
  }
};

const { w, x, y, nestedObject: { z } } = object;

console.log(w);
console.log(x);
console.log(y);
console.log(z);

// output: 0 1 2 3

Getting values out of arrays

We use destructuring syntax to get out those values from arrays.

const nestedArray = [1, 2, [3, 4], 5];

const [first, , [nested1, nested2], last] = nestedArray;

console.log(first);    // Output: 1
console.log(nested1);  // Output: 3
console.log(nested2);  // Output: 4
console.log(last);    // output: 5

Here you can see that we didnt print 2 because we skipped it, yes we actually skipped it, look here ➡️ [first, ,

This extra comma means skip the value.

Swapping values using destructuring

let a = 10;
let b = 20;
[a, b] = [b, a];

console.log(a);    // output: 20
console.log(b);    // output: 10

Explanation: "put value of b in a and value of a in b" ➡️ [a, b] = [b, a];

Spread Operator to merge, split and manipulate arrays and strings

const array1 = [1,2,3,4,5];
const array2 = [6,7,8];
const mergedArray = [...array1, ...array2];

console.log(mergedArray);    // output: 1,2,3,4,5,6,7,8

// spliting values of a string using spread operator
const stringArray = [..."Shubh"];
console.log(stringArray);   // output: [ 'S', 'h', 'u', 'b', 'h' ]

// rest operator
const [firstValue, secondValue, ...restValues] = [1,2,3,4,5];
console.log(restValues);    // output: [ 3, 4, 5 ]

Finding min and max values of an array using Spread operator

const numbers = [2, 5, 1, 8];
const minNumber = Math.min(...numbers); // minNumber will be 1
const maxNumber = Math.max(...numbers); // maxNumber will be 8

Default function parameters

function greet(name = "World") {
  console.log(`Hello ${name}!`);
}

greet();        // Output "Hello, World!"
greet("Shubh"); // Output "Hello, Shubh!"

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn and GitHub

Thank you for Reading :)

Self taught developers should avoid these traps

Shubh Sharma — Sun, 21 Apr 2024 08:35:57 +0000

1. Tutorial hell trap

I think this was very obvious but still wanted to add this as well in this list.

When you will be learning to code there will be a phase of your learning journey when you will get stuck in this for atleast once.

Tutorial hell is basically the feeling you get that you will not be able to make a project or code unless you follow a tutorial.

The real question is "How to get out of tutorial hell?"

Answer is very simple:

Learn the fundamental basics
Start building some basic project very very basic from beginning (could be anything)
Got stuck? Watch the tutorial if help needed or google it, you also have AI tools to help you in 2024
Find the solution and improve your learnings
Do not be scared of making mistakes

The only way is to follow these steps and keep building.

By building projects with minimum required skills you will learn the actual mindset of how developers and engineers build and solve problems by finding solutions themselves. After all they are problem solvers.

You will feel confident too :)

2. CSS Trap

I wasted my 3-4 months just in CSS, yep, I made some projects using pure html and css like twitter clone, tech crunch clone, etc.

Then I learnt about `sass and wasted more days to learn it and build more projects.

Then I learnt bootstrap and made 2 more basic projects using it.

LESSON?????

While learning CSS and making projects you will feel like a lot of progress but you should immediately shift to learning Javascript after 1 or 2 projects otherwise you will not do it for a long time and will probably procrastinate like I did.

I am not saying do not make projects, I am saying once you have learnt css foundations like flexbox, and other stuff you will be good to go ahead for javascript unless you want to be a master in css then its a totally different scenario.

You have to ask yourself, do you want to be a frontend/fullstack developer or just a CSS Master?

3. Comfort trap

When you know you have to learn javascript or react or nextjs or any other technology but you procrastinate it because you are too comfortable in your current technology.

This might sound controversial but think again, you are just stopping your true growth potential.

For example: I used to say Backend is scary and hard, I will probably go for frontend but once I learned about nodejs and express for backend I realised it was just my procrastination not letting me explore backend. I enjoyed learning backend.

And you might enjoy it too once you reach that skill however many beginners won't even reach that point because they will procrastinate it by being too comfortable in their small bubble or will just give up.

Do not be afraid of anything, its just your mind trying to stay in its comfort bubble, a trap of mind.

Conclusion

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn and GitHub

Thank you for Reading :)

Why do we need CORS to access CDN links?

Shubh Sharma — Sat, 20 Apr 2024 14:24:46 +0000

Intro

When you use a Content Delivery Network (CDN) to host static assets for your website, like images or Javascript files, those files are being served from a different domain than your main website.

This difference in domain can cause security issues with modern web browsers.

Reason is that browsers hate it when you try to access some resources from a different server than your own website served from.

This is a policy of browsers called "Same origin policy".

What CORS has to do with this

In easy terms, CORS (Cross Origin Resource Sharing) is like a handshake between your website and CDN (could be other servers as well), saying it's okay to load resources from each other.

It acts as a security check to prevent malicious scripts from loading unauthorized resources.

If header of request contains a CORS then good ✅👍

otherwise bad, gets rejected👎❌

This meme I made to explain in easy terms:

Thats why you will see something written like crossorigin in the cdn links.

<script 
  crossorigin 
  src="https://unpkg.com/react@18/umd/react.development.js"
>
</script>

<script 
  crossorigin 
  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
>

</script>

Conclusion

CORS help in allowing your website to access resources from different servers.

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn and GitHub

Thank you for Reading :)

4 Habits to Avoid Bugs related to Hoisting in your JavaScript Code

Shubh Sharma — Mon, 15 Apr 2024 19:29:23 +0000

1. Declaring variables at the beginning of the scope

By declaring variables at the beginning of the scope you ensure that these variables are accessible throughout that scope, avoiding any confusion caused by hoisting.

const data = 12;
const variable = "some data";

// other code

2. var ❌ let and const ✅

Use let and const instead of var to declare or initialize variables.

Variables declared with var are hoisted to the top of their scope and initialized with undefined. That's why accessing them before the declaration line will result in undefined.

On the other hand, variables created with let and const are also hoisted to their scope, but not initialized. That's why accessing them before the declaration line results in a ReferenceError.

This behavior is called the "Temporal Dead Zone" (TDZ).

Also let and const are only accessible within the block they are declared in. This eliminates the possibility of issues of hoisting by variables declared with var.

Example:

console.log(x); // undefined (hoisted, initialized with undefined)
var x = 10; 

console.log(y); // ReferenceError: Cannot access 'y' before initialization (not initialized)
let y = 5;

console.log(z); // ReferenceError: Cannot access 'z' before initialization (not initialized)
const z = 7;

3. "use strict" mode

Enabling strict mode directive at the beginning of your code can prevent some hoisting-related problems.

"use strict";

In strict mode, using an undeclared variable throws an error.

4. Use arrow functions and expressions inside a block scope

Using arrow functions and expressions in block scope instead of normal functions.

Function declarations are hoisted along with their entire definition meaning you can call a function before its declaration in the code.

Arrow functions and expressions are defined at the point of use, eliminating confusion. Since they are not hoisted they don't create any errors.

Example:

function setData() {
    // Calling the function before declaration throws error
    // Error: Cannot access 'myFunc' before initialization
    myFunc();

    // Using arrow function
    const myFunc = () => {
      console.log("This is a function expression!");
    }
}

setData();

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn and GitHub

Thank you for Reading :)

DOM Manipulation: Accessing the Elements of the Webpage.

Shubh Sharma — Sun, 14 Apr 2024 10:39:53 +0000

Intro ✨

In the previous blog I talked about DOM and how it helps developers in manipulating the values on the web page. This time I will share the guide on how to manipulate the data on the webpage using the JavaScript programming language.

Let's get started!

Accessing elements of the webpage 💻

The Browser Environment provides us with bunch of APIs (methods) to access and manipulate the DOM elements on the page. We can access the elements of the webpage using these methods of the document object.

We can try this all in the chrome developer console, you can access it using the f12 key on the keyboard or right click on the webpage and click on the inspect.

Then in the console tab we can try out our JavaScript code.

Once we have the hold of the element we can manipulate it easily.

Here's a list of all the methods we will be using to access elements of the webpage:

getElementByID()
getElementByClassName()
querySelector()
querySelectorAll()
getAttribute() and setAttribute()

getElementByID() 🆔

This method takes a string id of the element as input and returns the whole element.

document.getElementByID('id');

getElementByClassName() 👦

This method takes a string class of the element as input and returns a list of elements.

This list of the elements is called an HTMLCollection, which is kind of like an array but is not an array.

document.getElementByClassName('classname')

querySelector() ✅

This method is a different one from getElementByID and getElementByClassName and the difference is that it can take id or class or an element itself just like we used to target elements in the CSS.

for example: we can use document.querySelector('#id') instead of document.getElementByID('id')

You must be thinking, why do people use querySelector when we have getElementByID and getElementByClassName and the reason is the flexibility of selecting the elements by id, classname and element name itself and also because this syntax is used in jquery, a very popular library used in web development.

querySelectorAll() 🧑‍🤝‍🧑

This method works similar to querySelector() but the one single difference is that it returns a nodelist of the elements.

NodeList is an array-like collection of nodes. These nodes can be of various types such as elements, text nodes, comments, etc., that are part of a document.

We will have to select an element out of that nodelist like we do in the array.

You can see in the above image that it returns a list of all the elements I targeted using the class btn and using the method querySelectorAll()

We can access different nodes of this nodelist like an array, i.e, document.querySelectorAll('.btn')[1] to access the second element.

getAttribute() and setAttribute() 🔖

getAttribute() method is used to access the attributes of an element once its selected in the DOM, which means you will have to first select it using either getElementByID, className or querySelector methods.

I accessed the mod button's attribute id using the getAttribute() method.

This is useful when you want to access the attributes of an element for example a link which you want to access from the anchor (<a>) tag or image (<img>) tag.

We can also set values of an attribute using the setAttribute() method.

setAttribute() takes 2 inputs, first one is the attribute you want to select and the second one is the value of that attribute you want to set.

In the above image you can see that I selected the class attribute of the element by accessing it by it's id mod and changed it to hashnode and that's why the button lost it's properties of the btn class.

In easy terms you can read it like this in steps:

Select the element with mod id using document.querySelector('#mod')
Set the attribute of this element to hashnode using setAttribute('class', 'hashnode')

Accessing the text inside the elements 💬

As now we know how to access the elements, now its time to access the text/data inside the elements.

This can be done using following properties of the document object.

textContent
innerHTML
innerText

textContent 📝

textContent property returns the text inside the element.

In the above image I accessed the btn element and then accessed the text inside that element.

innerText ✍️

Also returns the text inside the element.

innerHTML 🕸️

returns the HTML content of the element, meaning that if there is any html tag inside the element it will also be returned here.

I had those ✨ emojis in the span tag so it returned the span tags as well.

Conclusion ✨

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn, and GitHub.

Thank you for Reading :)

Easiest Explanation of DOM, Even a 6 year old can understand

Shubh Sharma — Mon, 08 Apr 2024 07:24:52 +0000

Introduction

When learning web development I am sure many folks have seen or heard about this term called "DOM" and many people actually take it as a scary, hard to understand topic even before they start to learn about it.

In this article I will try to explain DOM (not that fast and furious one) in the easiest possible way.

So let's get started.

What is DOM?

Document object model provides a way to represent the structure and content of an HTML document as a "tree of objects".

You can think of it as a family tree from top to bottom but the only difference here is that it has only 1 top node called root node and is also known as the "document".

Document is the top node and the other child nodes of this document are called Elements of the HTML page.

Each element within the HTML file (such as <body>,<head>, <title>,<div>, <section>, <h1>,<p> etc.) becomes a separate node in the tree which are children of the root node (document).

While the root node is commonly known as the "document node", it's important to note that other elements like <head> and <body> can also serve as parent nodes to their own child nodes, forming a hierarchical structure within the DOM tree.

Document is an object

Remember that "document" is an object, you can access the data of that object by logging out the document, console.log(document), You can see lots of properties and methods of the document object.

This is how we will be accessing different properties and methods of document object.

DOM Tree Structure

This is how actual DOM Tree looks like:

<html> itself is a child of document, <head> and <body> are children of <html>, <title> and <meta> are children of <head> tag and so on.

Now I know few of you might be wondering "But you said top node is document!"

I know I know, and I can explain! 🗣️

Window

Window is not the top node, its just the "area where document is displayed", basically your browser tab in which you are reading this article right now, open a new tab and there will be new window. Yep that's the window!

So we can not call it the root node as we are only referring to the document and HTML related content for this tree, or can we? 🤔 It's a debatable topic.

What are your opinions on this? Leave them in the comments.

text node

"text node" is a type of node that represents text content inside elements of the HTML page. Such as text inside the <p> and </p> tags, or text inside <title> and </title> tags, that text is represented as a text node in the DOM.

It is a child of elements that contain textual content like paragraph tag or heading tag, etc.

Some more info about DOM

Document object model is a programming interface that allows "JavaScript" to interact with web pages.
It provides a way to represent the content of an HTML document as a tree of objects.
JavaScript interacts with the HTML using the DOM.
You can access and manipulate the HTML content on your webpage using the document object.
Document object is a part of Browser environment only.

What can we do with DOM?

We can "access" the contents of the HTML document with JavaScript which gives us the power to manipulate content on the webpage.
We can "traverse" through different elements and select the ones which we need to manipulate.
We can "edit" and change the content on the webpage.
We can "create" our own content on the webpage.
We can "delete" the content from the webpage easily.

Conclusion

DOM really gives so much power to manipulate the data dynamically on the webpage without ever writing a new HTML page from the scratch.

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other web Development topics.

For paid collaboration, you can mail me at: mail.shubhsharma19@gmail.com

Connect with me on Twitter, LinkedIn, and GitHub.

Thank you for Reading :)

REST API Explanation for 6 years old

Shubh Sharma — Thu, 04 Apr 2024 09:57:00 +0000

Intro

Imagine you have a vending machine. 💭🤖

When you approach the vending machine and press the buttons, it performs certain actions and gives you the desired item.

Now, think of the vending machine as a SERVER (a computer which serves or gives) and you as a CLIENT (a computer which need something) wants to interact with it.

REST API

A REST API is like a set of rules that the vending machine and you follow to communicate with each other.

It defines how you can ask the SERVER for specific items and how the SERVER responds to your requests. 🟢

In this case, the vending machine has different buttons (ENDPOINTS) representing different items (RESOURCES) you can get.

For example, button 1 for snacks, button 2 for drinks, and 3 for candies 🍭.

Each button has a unique label (URL) that tells the vending machine what you want.

To get the item you want, you press the button (send an HTTP request) to the vending machine.

The machine understands the request (GET, POST, PUT, DELETE, etc) and performs the necessary action according to your request, It may give you the item you requested (RESPONSE) or perform some other action based on your request, or sometimes might show you an error if item is not available.

Stateless Behavior

The vending machine is "stateless", meaning it doesn't remember anything about your previous requests.

Each time you press a button, you provide all the necessary information for the machine to understand what you want.

This is because HTTP is a stateless protocol.

Conclusion

Similar to a vending machine, in a REST API, the server and client (which could be a website or mobile app) interacts using some rules.

The client (You) send requests to the server's specific URLs (ENDPOINTS) to get or manipulate data.

The server (Vending machine) understands the requests and responds accordingly.

REST APIs are widely used in web development to create services that allow different systems and applications to communicate and exchange data.

Async/Await Easiest Explanation For Beginners

Shubh Sharma — Thu, 25 Jan 2024 11:24:26 +0000

Intro

Before learning about async/await you should know what and how promises work in JavaScript. You can read about promises here

What is async/await?

async/await were introduced in 2017, Before that managing asynchronous operations in javaScript was primarily done using promises.

While promises helped in the "callback hell" issue, they still introduced a certain level of complexity, especially when dealing with multiple async operations in sequence.

Async/await was introduced to make working with asynchronous code even more easy and readable. It provides a syntax that looks and behaves like synchronous code.

It is still built on top of Promises and is compatible with all existing Promise-based APIs.

Creating an async function using async keyword 👇

async function functionName() {}

async function working

An async function created with async keyword will always return a promise.

There could be 2 situations:

You return a promise explicitely like this

// explicitely returning the promise
async function functionName() {
  return new Promise((resolve, reject) => {
     resolve("Some data")
  })
}

You return any other value like number, object, string, array, etc, but here the JavaScript engine wraps that value inside a promise object to ensure that the value returned is a promise.

You will find second case in more professional code some examples such as fetch() or promisified version of fs methods or other promisified methods.

async function asyncFunction2() {
    // this gets wrapped inside a promise object
    return "String";
}

What about the await keyword?

The await keyword is used inside an async function to pause the function execution until a promise settles.

To understand this first understand how callstack and basic functions work 👇

JavaScript thread works by pushing the variables and function calls inside callstack. This function is not popped out of the stack until the code inside the function is completed executing.

But when its an async function with await keyword used inside, the story is different.

When JavaScript thread sees the await keyword inside the async function, the function is suspended from the callstack, meaning it is popped out until the promise is completed (resolved or rejected) and once promise is finished the function is again pushed on the stack and it continues from where it left off with the result of the promise.

This is where a lot of beginners get confused. So a point to note here is:

Point: Await keyword will only suspend the parent async function in which it is written. This means that JS thread is not blocked and can continue the other work out of the function.

Code example and Explanation

function returnData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Promise is resolved');
    }, 3000);
  });
}

async function fetchDataWithAwait() {
  const data = await promisificaction("Promise");
  console.log(data);
  console.log("Thread waited because of await keyword!")
}

fetchDataWithAwait();

console.log("Thread is still free to work!");

Explanation of code:

JS thread sees the returnData function which returns a resolved value after 3 seconds (setTimeout function is making sure of 3 seconds delay)
JS thread sees the fetchDataWithAwait function declaration.
JS thread now sees the fetchDataWithAwait() call and pushes the function on the callstack.
JS thread finds the await keyword and suspends this function from the callstack until promise is resolved (3 seconds)
JS thread continues to next line and prints "Thread is still free to work!" on the console
Now since the JS thread is idle, it pushes the async function back to the callstack and starts execution from where it left off.
"Promise is resolved" is printed on the console.
"Thread waited because of await keyword!" is now printed.

Output:

Why use aync/await when we already had promises?

Because the syntax of promises is confusing while await makes it more clear and readable.

Promises create a lot of confusion when you are dealing with API calls again and again in your code.

async/await fixes that confusion.

Remember that async/await still uses promises behind the scenes but it just makes the syntax more readable.

Using try/catch() to handle errors

Since async/await does not handle errors by default so we wrap them inside a try and catch() block of code.

try() is used to try the piece of code we wrote and catch() catches any error thrown by the api calls like in this example. This ensures the proper error handling.

 async function fetchDataWithAwait() {
  try {
    const data = await promisificaction("Promise");
    console.log(data);
    console.log("Thread waited because of await keyword!")
  } catch (error) {
    console.log(error);
  }
}

fetchDataWithAwait();

Conclusion

Once you know how to use async/await Async js becomes really easy. Took me many days to properly grasp all this but I tried to put this in easiest way possible.

After all it is said that if you can not explain something in easy terms then you don't know it properly. ;)

Promises in JavaScript for Beginners

Shubh Sharma — Sun, 21 Jan 2024 12:39:54 +0000

Intro

When working with async code in javascript you sometimes need to wait for the code to return data before further processing of data.

For example: reading a file takes some times or fetching data from the server can take time and since this is async task it gets delegated.

However we need this data before we can process and do anything further in our code. This is where promises can be super helpful.

What is a Promise?

Before promises were introduced, managing asynchronous operations was done using callbacks.

Callbacks are functions that are passed as arguments to another function and are executed later, once the asynchronous operation is complete.

However, as programs grew in complexity, managing callbacks became challenging, leading to what's often referred to as "callback hell" or "pyramid of doom."

This is a situation where nested callbacks make the code hard to read and maintain.

Promises were introduced to address these issues and provide a better/cleaner way to handle asynchronous operations.

So what the heck is a Promise? well, a promise is an object representing the eventual completion or failure of an async operation and its resulting value.

In short if an async task is completed with success it returns a resolve object with the data and if the task fails it returns a reject object with an error. Promise ensures that once the operation is completed, you can do anything you wanted depending on the completion or failure of the operation.

States of a promise

A Promise has three states:

pending: Promise is pending and its neither resolved nor resolved
resolved: Once promise is resolved it returns data to then() method
rejected: Once promise is rejected the error is returned to catch()

A basic example of a promise used:

// Creating a promise 
let myPromise = new Promise((resolve, reject) => {
    // Simulating async operation using setTimeout
    setTimeout(() => {
        let success = true;
        if (success) {
            resolve("Data fetched successfully");
        } else {
            reject("Error fetching data");
        }
    }, 2000);
});

This piece of code means a new promise is created which does an async operation such as setTimeout() and once its completed it either resolves the promise which means success or it gets reject with an error.

Once created a promise you can consume that promise.

// Consuming the promise
myPromise
.then((result) => {
    console.log(result);
})
.catch((error) => {
  console.error(error);
})
//default one, gets executed no matter resolve or reject
.finally(() => {});

If the promise is resolved then it is returned to .then() method of that promise, if promise is rejected then it gets returned to .catch() method.

In both the cases, you can do a task after the promise is completed.

How to handle data returned by the promise?

This can be done with the help of chaining of then() and catch()

Once the data is returned from the resolve you can get that data in then() method and then return it into a new then chain and then you can use that data and the error is caught by catch() method.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {}
       const error = false;
        console.log("Async task completed!");
        //data returned with resolve
        if(error === false) resolve([1,2,3]);
, 1000);
});

//handling data with chaining of then() and catch()
promise.then((data) => {
    return data;
})
.then((data) => {
    console.log(data.splice(0, 1));
})
.catch((err) => {
    console.log(err);
})

Async programming in JavaScript for beginners

Shubh Sharma — Wed, 03 Jan 2024 09:19:01 +0000

Introduction

Before understanding what is async programming and what is the need of async programming we need to understand the basic difference between sync and async and even before that we need to understand what does it mean when we say that javascript is single threaded.

Single threaded nature of JS

Programming languages can be of 2 types based on their threaded nature.

Multi-threaded: (Java, C++, C#, Golang, etc.)
Single-threaded: (JavaScript, etc.)

The single-threaded nature of JavaScript means that it processes one task at a time, and tasks are executed in a sequential manner.

What the heck is main thread in JS?

The main thread is like a worker doing one task at a time. It's the only worker in our example.

This worker (main thread) reads your JavaScript code line by line and does each task one after another. It's diligent but can only focus on one thing at a time.

In the world of web browsers, this worker not only runs your code but also takes care of updating what you see on the screen (HTML and CSS stuff). This means, when you click a button or load a page, the worker is responsible for making it happen.

Difference between sync vs. async

In programming terms, Synchronous means together or sequential but one thing at a time and Asynchronous means parallel, context switching between tasks.

This means sync operations are done one after another (main thread) without context switching between operations and if one operation is a time-consuming operations that could potentially block the main thread and lead to a slower code execution.

What is Asynchronous programming?

Async programming is basically managing tasks that might take some time to complete, such as I/O operations, file reading, network request, fetching data from a server, converting data into JSON, or waiting for a user to click a button, without blocking the execution of the rest of the code.

Some operations are not completed immediately and require some time to be completed, these operations are completed in the future, could be after 1 second, or 2 second, or 20 seconds, or even more, and since we are not sure when these tasks will be completed we make sure that these tasks are async in nature.

Because these tasks if taking too long might block the execution of the main thread so they are delegated so that the main thread is able to continue its work.

But who controls this behaviour of thread?

The answer is "runtime environment". It handles context switching between tasks to ensure efficient execution of the code. It can be in nodejs, browser or bun whatever.

How does javascript being single threaded does operations in parallel?

With the help of async functions such as setTimeout(), fs.readFile(), fs.writeFile(), fetch() and so more.

Example of a sync vs. async operation using built-in async functions 👇


//flow of the code execution is denoted with numbers in bracket.

const a = 10; // (1)

for(let i = 0; i < a; i++) {
    i += a;
} // (2)

const arr = [1,2,3,4,5]; // (3)

console.log(arr); // (4)

now let's see how async operations gets executed in js.

//flow of the code execution is denoted with numbers in bracket.
console.log('hello'); // (1)
setTimeout(function(){
    console.log('Async operation finished!');
},5000) // (4)
console.log('world!'); // (2)
console.log('hehe'); // (3)

In above example, I have used setTimeout() function which is an async function, it does performs something after a certain period of time which is given in milliseconds (5000ms = 5 seconds).

Let's see the full flow of the code execution 👇

hello is printed at first,
then the setTimeout function is read by the thread and since it is an async operation it is delegated and thread continues to do the next
world! is printed on screen, after that it continues on next line
hehe is printed.
and once all the sync tasks are completed, thread becomes idle and now it's free to take back the task which it delegated and now after 5 seconds, it prints Async operation completed.

How can we write our own async

By wrapping up the in-built js async functions inside our own created
By using Promises.

Here I will talk about the first approach only.

for example:

const delay = 5; // 5 seconds
function printsHelloAfterDelay(callbackFn, delay) {
  setTimeout(function() {
      callbackFn();
    },delay*1000);
}
printsHelloAfterDelay(printHello, delay);
function printHello() {
  console.log('Hello User!')
}
console.log('This is printed first');

Here, I created a sync function but inside there is an async operation happening.

That operation is delegated and once finishe it is pushed onto the callback queue, untill the thread is free it just waits there, and once thread is idle, it is invoked.

Conclusion

Async functions and async programming helps a lot in tasks which are needed to be completed in future and we dont want our thread to be blocked by the time taking operation.

In next blog I will talk about the architecture that allows this async operations in js.

Git Foundations

Shubh Sharma — Wed, 21 Jun 2023 13:26:38 +0000

Intro

In your tech journey, I am sure you must have come across the term Git.

Git stands as one of the most powerful and most used tools ever created.

In this article, we will deep dive into the world of Git, explore its history, and the reason it was created, will discuss the version control systems and more.

A little history of Git

Before Git, the Linux kernel development team used a proprietary Version control system called BitKeeper. However, a dispute arose between the BitKeeper creators and the Linux Kernel team.

As a consequence, the free-of-charge access to BitKeeper was revoked.

This incident led to the creation of Git by Linus Torvalds and Linux Kernel Development Team. They learned from their experiences with BitKeeper and set out specific goals in mind for the new system.

(Here is a quick meme 👇 you will get it If you know about Linus Torvalds)

The first public release of Git was in April 2005. It was made available for the public to download and quickly gained attention within the open-source community due to its performance and flexibility.

What is Version Control System and why do we need it?

Version Control System is a very powerful tool that helps you track changes in your files over time. It is a software utility that manages changes to a filesystem.
The concept of version control came some decades ago. In the early days of software development, programmers faced challenges when it came to keeping track of code changes and coordinating with team members. As projects grew larger and more complex, the need for a systematic approach to version control was needed.
Early version control systems were primarily focused on file-level operations, where developers used to manually manage different versions of files by creating copies or using naming conventions such as v1.0 or v1.1 etc.
However, these methods proved to be error-prone and not very efficient.
In the 1980s, a Centralized version control system was introduced.
After some time a distributed version control (DVCS) idea came up and one of these was BitKeeper.
VCS tracks the addition, deletion, and modification actions applied to files and directories.

Types of Version Control Systems

Centralized VCS: In a CVCS, there is a central repository that stores the entire history of the project. Developers check out files from this central repository, make changes, and then commit their changes back to the repository. Examples of CVCS include SVN and Perforce.
Distributed VCS: In a DVCS, each developer maintains a local copy of the entire repository, including the complete history. Developers can commit changes to their local repository and share those changes with others by pushing them to a central repository or directly to other developers. Examples of DVCS include Git and Mercurial.

Benefits of using Git

Fast: Git is designed to be fast and efficient.
Keeps track of changes: Git maintains a complete history of all modifications made to the codebase, including the ability to view differences between different versions.
Easy to use: Git is very user-friendly.
Non-linear: Git supports a non-linear workflow, allowing developers to create multiple branches to work on different features or bug fixes simultaneously. This enables parallel development, where team members can collaborate on separate branches without interfering with each other's work.
Distributed: Git is a distributed version control system (DVCS), which means that every developer working on a project has a complete copy of the repository, including the entire history of changes.

Can handle large codebases: Git can handle projects of any size, including large-scale applications.

If Git is so powerful then why do we need GitHub?

GitHub or similar platforms are used as a centralized place to distribute code from. While Git provides the core functionality for version control, these platforms allow more functionality making it easier to work on large-scale projects.
You can have your repo stored on GitHub, you pull the code from the repo into your local machine, make some changes then make commits and then you can push those changes from your local machine to the remote repo on GitHub.
There are more reasons people use GitHub, some of them include:

Backups
Better collaborations
Open Source Codebases
Issue tracking
PR tracking
Project management
Integration of more tools such as CI/CD tools, etc.

What is a Commit?

In Git, a commit is a snapshot of the changes made to a repository at a particular point in time.
It represents a set of changes made to the codebase, such as the addition or modification or deletion of the files.
Each commit has a unique identifier, called a hash, that allows you to refer to it and track the changes made to the code over time.
When you create a commit, you will also need to add a commit message that describes the changes you've made.
You can think of a commit as a photograph that you take of a file every time you commit a change.

What is a Branch?

Git branches are like those separate smaller branches on a tree.
They're separate paths of development that come from the main branch. -Each branch can have its own set of changes and updates.
The changes that you made on a branch will not affect the main branch.

Here is how commits and branches look like if you visualize 👇

And here is how it will look if you visualize them in a tree-like structure 👇

What is a Repo/Repository?

In Git, a repository is used as a place where you store and manage your codebase or project. It contains all the files, directories, and the history related to your work.

A repository is commonly called a repo in short. Repos can be divided into 2 types:

Local Repository: A local repository is a copy of the changes on your local machine (your computer), and it contains the complete history and files of your work. You can create a local repository by initializing Git in a directory using the command git init. It sets up the necessary Git files to track changes to your files within that directory.
Remote Repository: A remote repository is hosted on a remote server, such as GitHub, GitLab, or Bitbucket. It acts as a centralized location where multiple developers can collaborate on a project. You can push changes from your local repository to the remote repository and pull changes made by others into your local repository. Remote repositories allow for efficient collaboration, version control, and backup of your project.

Difference between Local and Remote Repo

The local Repo is in the computer saved locally while the remote repo is saved in the server as a central storage backup option. It also allows better collaboration, GUI features, project management features, issue tracking, pull request tracking and more.

What is a Fork? 🍴

A Fork is a way to create a copy of a repository that belongs to someone else.
When you fork a repository, you're essentially making a "duplicate" of that repository and creating your "own" version of it.
Changes made in your forked repository won't affect the original project or anyone else's fork of it.

How to create a fork?

To create a fork, you will need to create a GitHub account first. Follow these steps to create a fork 👇

Go to GitHub
Create a new account and if you have one then log in.
Click on the fork button of the repo of your choice (In this case I am forking the LinkFree repo)

Now it will ask you to give it a name, the default name is also fine.

Click on the Create Fork button and it will create a fork of that repo for you.

Notice how the forked repo says "forked from EddieHub/LinkFree" This is important to remind you that this is a fork, not the original repo.

Once you have forked the repo in GitHub, you can use the git remote add "URL" command to make a local copy of this fork on your computer.

We will discuss all these commands in the next article.

What is a Pull Request?

A pull request is a report of all the changes made.
Let's say that someone else wants to make a change in your repo. They can do that by creating a fork of that repo and make changes in their forked repo so that it doesn't interfere with your work.
Once they are satisfied with their changes, they can merge their work in your repo from Fork to original repo by asking you if you want to pull these changes into your original repo.
To do that, they can create a separate branch and commit their changes to that branch and then they can create a Pull Request to merge these changes into your original repo.
These changes then can be merged once the maintainer of that repo allows.

Conclusion

With that said, I hope this article helped you in understanding the foundations of Git.

In the next part, I will discuss more about the advanced concepts such as setting up the git and working with the git commands, making commits and more.

More Resources to checkout

Kunal Kushwaha Git YouTube Video
Git for Noobs series on YouTube
Wikipedia
bitbucket.org