DEV Community: Pratap Sharma

My Journey as a Lead Engineer at Rippey AI

Pratap Sharma — Wed, 19 Jun 2024 08:04:47 +0000

Introduction

Three months ago, I was promoted to Lead Engineer at Rippey AI, a company at the forefront of revolutionizing logistics and document processing through artificial intelligence. The journey has been both challenging and rewarding, filled with invaluable learning experiences and professional growth. Here, I’ll share my experiences, the challenges I faced, the lessons I learned, and what keeps me motivated in this dynamic role.

Transitioning to Lead Engineer

The Promotion

After seven months as a Senior Software Engineer, I was thrilled to take on the responsibilities of a Lead Engineer. My new role involved leading a team of 11 engineers in the design, development, and deployment of Rippey.ai, our flagship AI solution for automating logistics and supply chain processes.

Initial Challenges

Stepping into a leadership role brought its set of challenges:

Team Management: Managing a diverse team required honing my interpersonal and communication skills. Balancing different personalities and working styles was crucial to fostering a collaborative environment.
Maintaining Quality: Overseeing code reviews, architectural designs, and system integrations meant ensuring that our solutions met high-quality standards consistently.
Technical Guidance: Providing technical guidance and mentorship to junior engineers was essential for their growth and the team's success.

Key Responsibilities

Leading Development

My primary responsibility was to lead the development, implementation, and deployment of Rippey.ai. This involved:

Architectural Oversight: Designing robust architectures that could handle complex logistics automation tasks.
Code Reviews: Conducting thorough code reviews to maintain code quality and ensure best practices were followed.
System Integrations: Overseeing the integration of various systems and services to ensure seamless operation.

Mentorship

Mentoring junior engineers has been one of the most rewarding aspects of my role. Guiding them through technical challenges, helping them grow professionally, and seeing them succeed has been incredibly fulfilling.

Major Projects and Achievements

Rippey.ai Development

Leading the team in the development of Rippey.ai was a monumental task. We aimed to create an AI-driven solution that could revolutionize logistics and supply chain management. Key aspects included:

System Stability and Scalability: Implementing RabbitMQ to optimize inter-service communication, enhancing system stability and scalability.
Advanced Security: Designing and implementing Attribute-Based Access Control (ABAC) to replace traditional single-credential login systems, thereby enhancing security.

Enhancing Inter-Service Communication

One of my significant contributions was the implementation of RabbitMQ. This not only improved system stability and scalability but also mitigated potential system breaks, ensuring smoother operations.

Security Overhaul

Transitioning from single-credential login to ABAC was another critical project. This change provided a more granular and flexible approach to access control, significantly enhancing our system's security.

Lessons Learned

Leadership and Communication

Effective communication is key to successful leadership. I learned the importance of clear, concise communication, whether in giving instructions, providing feedback, or resolving conflicts.

Balancing Technical and Managerial Roles

Finding the right balance between technical responsibilities and managerial duties was crucial. It required efficient time management and the ability to delegate tasks appropriately.

Continuous Learning

The tech industry is ever-evolving, and staying updated with the latest trends and technologies is essential. Continuous learning and adapting to new tools and methodologies have been vital to my role.

Motivation and Future Goals

Driving Innovation

The opportunity to drive innovation in logistics automation keeps me motivated. Knowing that our work at Rippey AI has the potential to transform industries is incredibly inspiring.

Team Success

Seeing my team members grow and succeed is a significant source of motivation. Their achievements reflect the collaborative efforts and collective success of the team.

Personal Growth

This role has provided immense opportunities for personal and professional growth. I aim to continue developing my skills, taking on new challenges, and contributing to the success of Rippey AI.

Conclusion

The journey as a Lead Engineer at Rippey AI has been an incredible experience. The challenges faced, lessons learned, and the motivation derived from driving innovation and team success have been instrumental in my growth. As I look forward to the future, I am excited about the possibilities that lie ahead and remain committed to contributing to Rippey AI's mission of revolutionizing logistics automation.

For more about my work and experiences, visit my website.

How to Provide Better Task Estimations for Your Team?

Pratap Sharma — Wed, 19 Jun 2024 07:59:55 +0000

Providing accurate task estimations is a perennial challenge for software development teams. Inaccurate estimations can lead to missed deadlines, budget overruns, and undue stress for your team. As a lead engineer or manager, there are several strategies you can implement to help your team improve their estimations. This blog will explore these strategies in detail, drawing from real-world experiences and best practices in the industry.

Understand and Compensate for Bias

One of the first steps in improving task estimations is to help your team recognize and adjust for their own biases. Estimations can be skewed due to over-optimism or excessive pessimism. Encourage your team members to reflect on their past estimations and compare them with the actual time taken to complete tasks. This can help them identify patterns in their biases and make more informed adjustments in future estimates.

Use Broader Value Ranges

Rather than pushing for precise estimates, encourage the use of broader value ranges. For example, distinguishing between tasks that will take 3 weeks versus 4 weeks can be challenging and often unnecessary. Instead, categorizing tasks into broader timeframes such as half-days, days, weeks, and months can provide sufficient detail for planning purposes without demanding unrealistic precision.

Group Estimations and Discussions

Conducting group estimations can be highly effective. When team members provide their estimates individually and then discuss any significant discrepancies, it leads to more accurate and well-rounded estimations. Group discussions allow team members to consider different perspectives and factors they might not have initially accounted for, leading to more accurate and realistic estimates.

Agile and Continuous Delivery

Agile methodologies have transformed the approach to software delivery and task estimation. Agile promotes the idea that software is never truly "done" and prioritizes continuous delivery of valuable features. By using Fibonacci sequences (e.g., 1, 2, 3, 5, 8, etc.) for estimations, teams can better gauge the complexity and effort required for each task. Tasks estimated at 8 or higher are typically split into smaller, more manageable pieces.

Continuous backlog grooming and prioritization ensure that the most valuable tasks are always addressed first, without the need for rigid time commitments. Implementing automated tests and quality gates for each check-in helps maintain a robust and reliable codebase, facilitating continuous delivery.

Ponderation Sheets for Legacy Projects

For teams working on legacy software, where changes can have unpredictable consequences, creating a "ponderation sheet" can be useful. This involves adjusting initial estimates based on known complexities and historical data. For example, touching a specific module might multiply the estimate by 1.5, 2, or even 3 times, or add a fixed number of days based on past experiences. While these adjustments are somewhat arbitrary, they can significantly improve estimation accuracy in complex environments.

T-Shirt Sizing for Younger Projects

In younger projects, using T-shirt sizing (small, medium, large) or points can be effective. This method translates to broader timeframes, such as whether a task will take a day, a week, or an entire sprint. Tasks that require more than a sprint should be broken down into smaller, more manageable stories that can be completed within a week.

Retrospectives

Regular retrospectives are crucial for improving estimations over time. During retrospectives, teams can review what worked well and what didn’t in previous sprints, including the accuracy of their estimations. This reflection helps teams continuously refine their estimation processes and adapt to changing circumstances.

Consider the Working Environment

The working environment can significantly impact task estimations. For instance, bureaucratic environments may slow down progress, making tasks that would take a few days in a startup take much longer. Encourage your team to account for these environmental factors when making their estimates. This awareness comes with experience and should be continually evaluated and adjusted.

Conclusion

Improving task estimations is an ongoing process that requires a combination of self-awareness, collaboration, agile practices, and continuous reflection. By implementing these strategies, you can help your team provide more accurate and realistic estimations, leading to better project planning and execution. Remember, the goal is not to achieve perfect precision but to make informed, realistic estimations that guide your team effectively.

By fostering a culture of continuous improvement and learning, your team can navigate the complexities of software development with greater confidence and success.

Understanding Proxies: The Differences Between Forward and Reverse Proxies

Pratap Sharma — Mon, 17 Apr 2023 08:55:07 +0000

Introduction

Proxy servers are a popular tool for managing and securing network traffic. A proxy server acts as an intermediary between clients and servers on a network. It can intercept and modify requests and responses, adding an extra layer of control and security to network traffic. There are two primary types of proxy servers: forward and reverse proxies. In this article, we’ll take a detailed look at both of these types of proxies.

What is a Forward Proxy?

A forward proxy, also known as an outgoing proxy, is a server that sits between a client and the internet. When a client requests access to a resource on the internet, the request is first sent to the forward proxy server. The proxy server then forwards the request to the internet on behalf of the client, and returns the response to the client.

A forward proxy is typically used to provide anonymity to clients by hiding their IP address. The proxy server acts as an intermediary, so the destination server only sees the IP address of the proxy server, not the client’s IP address. This can be useful for clients who want to access resources on the internet without revealing their location or identity.

Forward proxies can also be used to enforce content filtering policies. For example, a company may use a forward proxy to prevent employees from accessing certain websites during work hours. The proxy server can be configured to block requests to specific websites or categories of websites, such as social media or gambling sites.

What is a Reverse Proxy?

A reverse proxy, also known as an incoming proxy, is a server that sits between the internet and a server. When a client requests access to a resource on a server, the request is first sent to the reverse proxy server. The proxy server then forwards the request to the server on behalf of the client, and returns the response to the client.

A reverse proxy is typically used to improve performance, scalability, and security of a server by caching content, load balancing traffic, and providing a single point of entry for incoming requests. By caching frequently accessed content, a reverse proxy can reduce the load on the server and improve response times for clients. By load balancing traffic across multiple servers, a reverse proxy can prevent overloading and ensure that all clients receive a fast and responsive service. By providing a single point of entry for incoming requests, a reverse proxy can improve security by reducing the number of entry points into the server.

Why is Nginx called a “reverse” proxy?

Nginx is often referred to as a "reverse" proxy because it operates in the opposite direction of a traditional forward proxy. A forward proxy is a server that sits between a client and the internet, forwarding requests from the client to the destination server. On the other hand, a reverse proxy is a server that sits between the internet and a server, forwarding requests from the internet to the server.

Nginx is a web server and load balancer that can act as a reverse proxy. When acting as a reverse proxy, Nginx receives incoming requests from the internet on behalf of a server and forwards those requests to the server. Nginx can also be configured to load balance incoming requests across multiple servers to improve performance and scalability.

Benefits of Forward and Reverse Proxies

Forward and reverse proxies provide a number of benefits for network management and security:

Anonymity: Forward proxies can be used to provide anonymity to clients by hiding their IP address from the destination server.
Content filtering: Forward proxies can be used to enforce content filtering policies, blocking requests to specific websites or categories of websites.
Performance: Reverse proxies can improve performance by caching frequently accessed content and load balancing traffic across multiple servers.
Scalability: Reverse proxies can improve scalability by distributing traffic across multiple servers, preventing overloading and ensuring that all clients receive a fast and responsive service.
Security: Reverse proxies can improve security by providing a single point of entry for incoming requests and reducing the number of entry points into the server.
Flexibility: Proxies can be configured and customized to meet the specific needs of a network, allowing administrators to control and manage traffic in a way that is tailored to their requirements.

Forward Proxy vs Reverse Proxy

Forward Proxy	Reverse Proxy
Avoid browsing restrictions	Load Balancing
Improve security by reducing the number of entry points into a network	Protects from DDos attacks
Protects user identity online	Cache static contents
Blocks access to certain contents	Encrypts and Decrypts SSL communications

Conclusion

Forward and reverse proxies are powerful tools for managing and securing network traffic. They provide a number of benefits, including anonymity, content filtering, performance, scalability, security, and flexibility. By using proxies, administrators can gain greater control over their network traffic, improving performance, security, and overall network management. Whether you need to provide anonymous access to the internet, enforce content filtering policies, or improve server performance and scalability, proxies are a valuable tool for achieving your goals.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Please let me know if there's anything else I can add or if there's any way to improve the post. Also, leave a comment if you have any feedback or suggestions.

useMemo - React Hooks Series

Pratap Sharma — Mon, 28 Jun 2021 02:57:36 +0000

Welcome back to the series of React Hooks.

Series path

The main objective will be to explore how re-rendering works in React, why that is a critical factor for React applications, and how the useMemo hook can leverage it to build a performance boost in your applications. We will also see when useMemo can cause performance issues.

What is `useMemo` hook?

useMemo() is a built-in React hook that accepts two arguments — a function compute that computes a result and the dependencies array:

const memoizedResult = useMemo(compute, dependencies);

Let us try to get the essence of the useMemo hook. During the first rendering, useMemo(compute, dependencies) invokes the compute function, which is the first argument, memoizes the calculation result, and returns it to the component.

If during the next renderings the dependencies change, then useMemo() invokes compute, memoizes the new value, and returns it. But if dependencies don't change during re-rendering, then useMemo() doesn't invoke compute but returns the memoized value.

When to Use `useMemo`?

The basic and first step is to write the code first and then revisit it to see if any optimization can be made.

Implementing useMemo too often in an application can harm the performance.

When looking to implement useMemo, you can check with profiling tools in the debugger to identify any expensive performance issues. By expensive, I mean if the application is consuming a lot of resources (memory). It makes sense to memoize with useMemo only if you declare a large number of variables in a function at render.

Example

A component <ComputeFactorial /> calculates the factorial of a number introduced into an input field.

Here’s a possible implementation of <ComputeFactorial /> component:

import { useState } from "react";

export const ComputeFactorial = () => {
  const [number, setNumber] = useState(1);
  const [inc, setInc] = useState(0);

  const factorial = getFactorialOf(number);

  return (
    <div>
      Factorial of
      <input
        type="number"
        value={number}
        onChange={(event) => setNumber(Number(event.target.value))}
      />
      is {factorial}
      <button onClick={() => setInc((i) => i + 1)}>Force Re-render</button>
    </div>
  );
};

function getFactorialOf(n) {
  console.log("getFactorialOf(n) is called!");
  return n <= 0 ? 1 : n * getFactorialOf(n - 1);
}

Every time the input value is changed, the factorial is calculated usinggetFactorialOf(n) and 'getFactorialOf(n) is called!' is logged to console.

On the other hand, each time you click the Force Re-render button, the inc state value is updated. Updating the inc state value triggers <ComputeFactorial /> component to re-render. When a component is re-rendered, the factorial is recalculated again — 'getFactorialOf(n) is called!' is logged to console.

How can you memoize the factorial calculation when the component re-renders? Welcome useMemo() hook!

By using useMemo(() => getFactorialOf(number), [number]) instead of simple getFactorialOf(number), React memoizes the factorial calculation.

Let’s improve <ComputeFactorial /> and memoize the factorial calculation:

import { useState, useMemo } from "react";

export const ComputeFactorial = () => {
  const [number, setNumber] = useState(1);
  const [inc, setInc] = useState(0);

  const factorial = useMemo(() => getFactorialOf(number), [number]);

  return (
    <div>
      Factorial of
      <input
        type="number"
        value={number}
        onChange={(event) => setNumber(Number(event.target.value))}
      />
      is {factorial}
      <button onClick={() => setInc((i) => i + 1)}>Force Re-render</button>
    </div>
  );
};

function getFactorialOf(n) {
  console.log("getFactorialOf(n) is called!");
  return n <= 0 ? 1 : n * getFactorialOf(n - 1);
}

Every time the value of the number is changed, 'getFactorialOf(n) called!' is logged to console, which is expected.

However, if you click Force Re-render button, 'getFactorialOf(n) is called!' isn’t logged to console because useMemo(() => getFactorialOf(number), [number]) returns the memoized factorial calculation. How cool is that!

Wrapping up

This article explored the useMemo hook and when it is appropriate to use it in a React application.

We also see that useMemo helps in boosting the performance of an application by "remembering" or memoizing expensive functions and preventing a re-render every time there is a change in the application.

We also learnt that while using useMemo can improve the application's performance, overusing useMemo can slow down your application. This means the more useMemo hook is used, and the memory has to be allocated for the memory.

If you have any questions, suggestions, corrections, I will look forward to it. Thank you for making it this far.

Series path

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

useEffect - React Hooks Series

Pratap Sharma — Sat, 26 Jun 2021 04:24:25 +0000

Welcome back to the series of React Hooks. In part one of the series, I wrote about the useEffect react hook.

Series path

useState
useEffect

What is `useEffect` hook?

The useEffect hook lets you perform side effects in functional components.

Few examples of side effects

Data fetching
Setting up a subscription
Manually changing the DOM in React

If you are familiar with React class lifecycle methods, you can think of useEffect hook as componentDidMount, componentDidUpdate and componentWillUnmount combined.

What does `useEffect` hook do?

By using this hook, you let React know that your component needs to perform something after rendering of the component. React will remember the function which you passed and react call it after performing the DOM updates.

In this effect we can do many things like setting document title, fetch some data from an API, setting event listeners.

Does useEffect run after every re-render?

Yes! By default, the effect runs both after the first render and after every update of the component. Rather than thinking in terms of mounting and updating, you might find it simpler to think that effects happen after render. React guarantees the DOM has been updated by the time it runs the effects.

Example

Let's change the document title for better understanding.

Using class component

import React from "react";

class ExampleComponent {
  //After rendering
  componentDidMount() {
    document.title = "Updating the title in componentDidMount";
  }

  //After updating
  componentDidUpdate() {
    document.title = "Updating the title in componentDidUpdate";
  }

  render() {
    return <div>Setting the title</div>;
  }
}

export default ExampleComponent;

Using functional component

import React, { useEffect } from "react";

const ExampleComponent = () => {
  useEffect(() => {
    document.title = "Setting title using useEffect";
  });

  return <div>Setting the title using useEffect hook</div>;
};

In function component, you have to define one useEffect function instead of componentDidMount and componentDidUpdate.

Getting deeper

Now we know what useEffect is. Let us try to understand it deeper. useEffect function accepts two-parameter. i) A function which gets called on every update/re-rendering. ii) An array of dependencies value on which the function has to get called.

1. The useEffect below will always get called on rendering and updating of the component.

useEffect(() => {
  console.log(
    "I will be called each time the component renders and re-renders"
  );
});

2. The useEffect below will get called only once. i.e. the first time it renders. It is equivalent to componentDidMount. The second parameter [] is called the dependencies array. An empty array means no dependency.

useEffect(() => {
  console.log("I will be called only once when the component is mounted");
}, []);

3. The useEffect below will get called each time the value of name is changed. It is like componentDidUpdate.

useEffect(() => {
  console.log("I will be called first when the component is mounted and each time the name is changing");
}, [name]);

4. If we want to do any clean-ups before the component is unmounted.

useEffect(() => {
  // some tasks

  return () => {
    console.log("I do cleanups");
    console.log(
      "will first run on component mount then, will run before useEffect and lastly before unmounting"
    );
  };
});

Wrapping up

I want to thank you for going through the part two of my React Hooks series, in case you missed part one please check it out here(hyperlink)

If you have any questions, comments, corrections I would look forward to it. Thank you for making it this far.

Series path

useState
useEffect

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

useState - React Hooks Series

Pratap Sharma — Wed, 23 Jun 2021 02:38:40 +0000

Welcome to the hooks series of react. In this series, I will go through the different hooks which were introduced in React 16.8.

Series path

useState
useEffect

Why do we prefer functional component over class component in react

Functional component is much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
Functional component are written shorter and more straightforward, which makes it easier to develop, understand, and test.
With the introduction of Hooks in we are now able to manage state in functional components.

What is Hooks?

Hooks were a new addition in React 16.8. They let you use state and other React features without writing a class. It means you don't need to use a class component to use a state.

What is useState Hook?

useState is a Hook which allows you to have state variables in functional components.

First of all, let us import useState hook from react.

import React, { useState } from "react";

How to use:

const [name, setName] = useState("Pratap");

Let us try to understand what we just added:

name: State Variable.
setName: Function to change the state value.
useState: useState react Hook.
Pratap: State initial value.

Example

import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
};

export default Example;

Now, let us add a button which will change the state value from Pratap to Prasar.

import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  const changeState = () => {
    //This will change the state value
    setName("Prasar");
  };

  return (
    <div>
      <h1>{name}</h1>
      <button onClick={changeState}>Change Name</button>
    </div>
  );
};

export default Example;

Conclusion

In the next article in this React Hooks series, we will get to know and see about useEffect hooks.

Thank you for reading my first part in the React Hooks Series!

Series path

useState
useEffect

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Deep dive into Asynchronous Javascript

Pratap Sharma — Wed, 16 Jun 2021 00:54:29 +0000

In this article we'll be covering callbacks, promises and async/await as these are the ways to deal with asynchronous data.

To understand asynchronous, you'll first have to understand synchronous.

What is synchronous?

Synchronous is when something is done in sequence. In programming terms synchronous is when a bunch of code are executed one after the other.

For example

function A() {
  console.log("Task 1");
  console.log("Task 2");
  console.log("Task 3");
}
A();

In the example above the code will run synchronously.

Task 1
Task 2
Task 3

It prints Task 1, Task 2, and Task 3 one after the other. It will wait for every line to complete its execution.

What is asynchronous?

Asynchronous is nothing but just the opposite of synchronous. You keep doing things while others are getting completed.
What do you think the code will print?

console.log("Task 1");
setTimeOut(() => {
  console.log("Task 2");
}, 1000);
console.log("Task 3");

well the above code will print

Task 1
Task 3
Task 2

Why does it print that way? It is because setTimeout function is not called immediately. It is called after 1 second. Till the time it waits the third console.log() gets printed.

Why Asynchronous Javascript?

When a JavaScript code is executed, the synchronous code blocks further execution until it completes what it's doing. Code which takes long to complete can make the UI/server unresponsive until the function has returned, which result in a terrible user-experience.

For instance: You want the latest comments of your blog from a server and render in your blog, and it is done synchronously, then a visitor who is in your blog site won't be able to do other things until those comments are loaded. Which indeed could cause a long delay before they could read the comments in your blog.
To understand the above example, follow the code:

const comments = loadCommentsFromDatabaseSync();

displayBlogInWebPage();

In the above code, in order to display the blog on website, the website will first have to wait for loadCommentsFromDatabaseSync() to get complete. Once loadCommentsFromDatabaseSync() is completed then only it will display the blog in the web page.

By using async

const comments = loadCommentsFromDatabaseAsync();

displayBlogInWebPage();

In the above code displayBlogInWebPage() will not wait for the completion of loadCommentsFromDatabaseAsync().

We should use asynchronous programming when performing expensive and time-consuming operations.

Different ways of Asynchronous programming

In javascript, there are three ways to accomplish asynchronous programming, namely callback, promises and async/await.
Let us get in detail with example.:

Callback

What is a callback?

A callback is a function which is executed after a subsequent function has finished executing.

As JavaScript functions are also a type of object and they can be passed as an argument while calling a function so much like any other objects like string, number etc.
Example:

function addTwoNumbers(a, b, callback) {
  console.log("Addition of two numbers: ", a + b);
  callback();
}

function print() {
  console.log("This must be printed after addition to the console");
}

addTwoNumbers(2, 3, print);

The output of the above code:

Addition of two numbers: 5
This must be printed after addition to the console

In the above example, we have two functions:

addTwoNumbers(a,b,callback): This functions is called with there arguments a,b and callback, where a and b are numbers while the third argument callback is a function. The addTwoNumbers() prints the addition of the two numbers, and as soon as that completes its execution, the callback function is fired!

This type of function is also known as the callback function.

print(): As soon as addTwoNumbers() completes its execution and call the callback function this print() will get called and prints its output to the console.

Callbacks are mainly used for handling asynchronous operations like – making an API request to the server, fetching/writing some data from/into a file, registering event listeners etc. Callbacks are used for the mentioned operations. Depeneding on the result of the operation the callback function will be executed.

Promises

To understand the basic of promises please check-out Basic of Promises.

This will be the continuation of the above link.

basic syntax of promise in javascript.

let promise = new Promise(function (resolve, reject) {
  //resolve or reject is done here
});

As discussed in the basics of Promises section promises have three states, and the states are self-explanatory:

Pending: Pending is a state when the promise is neither resolved or rejected. It will continue to remain indefinitely pending unless it gets resolved or rejected.

Resolved: A promise is resolved when the resolve method is called from the promise. The resolved promise will be consumed in the .then() section.

Rejected: If the reject function was called from the promise, then the promise is rejected. If the promise is rejected, then it should be consumed in the .catch() section.

Consuming a promise

Please check the above link in order to see consuming promises.

Chaining of promises

In order to understand the concepts of Async/await, one has to understand the core usage of promise, which includes chaining of promises.

When a .then() method returns a promise, then the subsequent executions of the .then() are suspended until the current promise block is resolved.

let firstPromise = new Promise(function (resolve, reject) {
  setTimeout(resolve, 1000, "Pratap");
});

let secondPromise = new Promise(function (resolve, reject) {
  setTimeout(resolve, 2000, "Prasar");
});

let thirdromise = new Promise(function (resolve, reject) {
  setTimeout(reject, 3000, "Error");
});

firstPromise
  .then((x) => {
    console.log("First Promise after 1 sec: ", x);
    return secondPromise;
  })
  .then((x) => {
    console.log("Second Promise after 2 sec: ", x);
    return thirdromise;
  })
  .catch((e) => {
    console.log("Third Promise after 3 sec: ", e);
  });

The output of the above code:

First promise after 1 sec:  Pratap
Second promise after 2 sec: Prasar
Third promise after 3 sec: Error

Explanation of above code.

Let us understand step by step:

We have initialised 4 promises firstPromise, secondPromise, thirdPromise and fourthPromise. For the first instance, all four promises are racing toward resolve/reject.
After 1 second the firstPromise gets resolved as we are calling the resolve method in the promise initialization and this gets printed in the console First promise after 1 sec: Pratap. Then we return another promise secondPromise.
After 2 seconds the secondPromise also gets resolved and Second promise after 2 sec: Prasar gets printed to the console. We then return thirdPromise from the secondPromise.
But, after 3 seconds the thirdPromise gets rejected as we called reject in the thirdPromise initialization. Third promise after 3 sec: Error gets printed to the console.

Promise.all

Promise.all accepts an array of promises, and will attempt to fulfil all the promises. If any of the promises are rejected, then the promise will exit.

In order to fulfil multiple promises, promise.all was introduced. It is widely used in javascript frameworks where we want to get data from multiple APIs. So rather then calling the promises individually you'd better want to use Promise.all() method and handle the result based on the status of the promises.

An example of promise.all:

const arrayOfPromises = [new Promise(promise1), new Promise(promise2)];

function runAllThePromises() {
  Promise.all(arrayOfPromises).then(showSuccessMessage).catch(showErrorMessage);
}

arrayOfPromises();

Promise.race

promise.race()method returns a promise which fulfills or rejects as soon as one of the promises in an array gets fulfills or rejects.

We can understand promise.race() as the realtime race.

Suppose five people are participating in a race and any of them crosses the winning line then the race ends. Also, if any of them gets injured, then also the race gets end.

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "First Promise");
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "Second Promise");
});

Promise.race([firstPromise, secondPromise]).then((value) => {
  console.log(value);
});

Output:

Second Promise

Explanation:

We passed firstPromise and secondPromise as an array in the argument of Promise.race(). As secondPromise gets resolved faster than firstPromise so Second Promise gets printed in the console.

Async/Await

Async/Await is one of the most recent additions to the JavaScript language which is part of ES8.

Async/Await is syntactic sugar on top of promises which makes asynchronous code easier to write and to read. The async code is written just like the synchronous code. It is just a special syntax to work with promises in a more synchronous-type manner.

Basic function:

const getFruit = () => {
  return "Mango";
};

The above snippet just a basic javascript code which returns Mango.

async

Now, let us convert the above code to promise using async keyword.

const getFruit = async (name) => {
  const fruits = ["Apple", "Banana", "Mango"];

  return fruits[name];
};

Now, in the function above, just adding async keyword in front of a function, not the function will return a Promise.

getFruit("Apple").then((res) => {
  console.log(res);
}); // prints: Apple

await

The await keyword is used to wait for a Promise to get resolved. await can be used inside an Async function block only. It makes JavaScript wait until the promise returns a result. It only makes the async function block wait and not the whole program execution.

async function demonstrateAsync() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Promise is ressolved!"), 1000);
  });

  // wait until the promise returns us a value
  let result = await promise;

  console.log(result);
}

demonstrateAsync();

The output of the above code:

Promise is ressolved!

await should be used within an async block only.

await can't be used in top-level code

Catching error in async/await

Handling errors in async/await is pretty straight forward. In order to handle an error, we just have to wrap inside a try..catch block.

async function thisThrowsError() {
  try {
    let response = await fetch("http://invalidUrl");
  } catch (err) {
    console.log("Error: ", err); // Invalid url
  }
}
thisThrowsError();

Any error in the scope of try block will be handled in the catch block.

Conclusion

In this blog, we have completed the different ways of asynchronous programming in Javascript and their usage.

Due to the addition of asynchronous programming in javascript, it makes it possible to express waiting for long-running actions without blocking the execution of code. In javascript, it is typically implemented using callback, promises and async/await.

Programming asynchronously in Javascript is made easier by using promises and async/await, which allow us to write an asynchronous program as if it were synchronous.

var, let, and const – Why to avoid var 😷 and how to put the other two to good use? - Javascript

Pratap Sharma — Sat, 12 Jun 2021 10:06:47 +0000

Well, in this blog, we will illustrate the differences between var, let and const. We'll also discuss why we should avoid var and prefer const.

In ES5, we had only one way of declaring variables using var. But with ES6 we now have three to declare a variable namely var, let and const.

1. var

Firstly let us see how var works:

for (var i = 0; i < 10; i++) {
  console.log(i);
}

In most programming languages, the scope of iwill be inside the body of loop only. The value of i can be accessible within the body of for loop.

Let us see what happens if we console the value of variable i after the loop.

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log("After loop ", i); //This prints 10. 😳 Why is that?

We can see that we are able to access the variable i even outside the loop, which is very intuitive when coming from another programming language. No one would expect the variable i to survive outside the loop.

Why does that happen🤔?
The reason is that there is only one type of variable scope in ES5, which is a function scope.

To illustrate the above statement, let us wrap the above code inside a function and execute the function.

function counter() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
  console.log("After loop ", i); //still prints 10 🤥
}
counter();

Let us move the console.log() to outside of the loop and see what happens.

function counter() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
}
console.log("After loop ", i); //It throws an error this time: Reference error: i is not defined. 🤤
counter();

This time it throws an error Refrence error: i is not defined and it is because the scope of var is within the f unction scope . The variable i will be available only within the function counter and if called from outside the function it will throws and error.

In order to avoid this type of error, Some developers used the concept of Immediately Invoked Function Expression (IIFE).

This is how IIFE looks like.

(function() {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
})();
console.log("After loop ", i);

Most of the Javascript developer does not know about IIFE.

IIFE is a function that is declared and called immediately.

People do this to keep the variables that are inside the IIFE to pollute the rest of the code. It creates lots of cohesive block of safe-heaven.

Javascript variables are hoisted

What do Javascript variables are hoisted means?
Well, it means that they are hoisted to the top of their function.

What Javascript compiler or interpreter does is it will go through the code, and it will find variable declaration and push them up to the top of the function.

70% of javascript developers do not know the concept of hoisting.

Upon compiling the below code it still works. A the variable i of for loop is hoisted to top of the function.

(function() {
  var i; //It pushes the variable to top of the function.
  for (i = 0; i < 10; i++) {
    console.log(i);
  }
})();

Keep note it doesn't matter how many lines of code are there in between, it will still move the variable declaration to the top of the function.

There is also a horrible aspect of hoisting. Let's say you forgot the variable declaration. as shown in below code

(function() {
  for (i = 0; i < 10; i++) {
    console.log(i);
  }
})();
console.log("After loop ", i); // This prints 10. What the heck just happened??😧

Why does it prints 10? This happened because the javascript interpreter has put the variable declaration out of the function this time.

If there is no variable declaration inside a function the interpreter will keep going up the function chain all upto global/window object. And then if it finds it then it will place the variable in the global/window object.

var i;
(function() {
  for (i = 0; i < 10; i++) {
    console.log(i);
  }
})();
console.log("After loop ", i);

This is of course horrible because you can accidently declare a global variables.
This is why we are encouraged to always use use strict statement, it prevents us from accidentally declaring a global variable.

"use strict";
(function() {
  for (i = 0; i < 10; i++) {
    console.log(i);
  }
})();
console.log("After loop ", i);

This time the above code will throw an error RefrenceError: i is not defined.

"use strict";
var i = 9999;
(function() {
  for (var i = 0; i < 10; i++) {
    console.log(i); // this prints 1 2 ...10
  }
})();
console.log("After loop ", i); // This prints 9999

Even though we are using the same variable name, it prints 9999 because the inner var i = 0 is scoped to the function only.

This time let's remove var from inside the function and see what happens

"use strict";
var i = 9999;
(function() {
  for (i = 0; i < 10; i++) {
    console.log(i); // this prints 1 2 ...10
  }
})();
console.log("After loop ", i); // This prints 10

It prints 10, this is because i inside function is reassigning the outside variable i. As mentioned above it will check if variable i is defined in function, if it doesn't found it then it will move up to the global/window. As it finds the variable i then it will be re-assigned. That is the reason why it is logging out 10.

Always remember the concept of hoisting. Hoisting is nothing but moving the variable declaration to the top of the function or global/window object.

2. let

Now let us demonstrate the same example using let.

"use strict";
var i = 9999;
for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log("After for loop", i); // This prints 9999. It works.

We can see from the example code above that let is not behaving like var. And the above code works as expected.
The reason why it worked is that let introduces block scoping. The variable let i = 0 of for loop will be available only inside the body of for loop.

The block scoping of let is also valid for if/else, switch etc.

"use strict";
var i = 9999;
for (let i = 0; i < 10; i++) {
  console.log(i);
}
if (true) {
  let i = 1000;
}
console.log("After for and if", i); // This still prints 9999.

From the code snippet we can see that the the scope of variable i is scoped with in for loop and if respectively.

Just like var we can re-assign let.

let i = 10;

i = 57;

console.log(i); // Prints 57

let is block scope while var is function scope.

A lot of people say that let is the new var and I agree with that.

3. const

const is a variable just like let which cannot be re-assigned. To demonstrate this, let me show you an example.

const i = 10;

i = 57;

console.log(i);

The code above throws an error TypeError: Assignment to constant variable.

Let's look at an example below

const x = {
  y: 10,
};
x.y = 15;

console.log(x); // Prints {y: 15}

We can see that we are able to update the property of x. Now let us try to assign a new object to constant variable x.

const x = {
  y: 10,
};
x = { z: 11 };
console.log(x); // This time it throws an error

The code snippet above throws an error because we are re-assigning a constant variable.

var vs let vs const

Whole blog summarized in a table.

Scopes	var	let	const
Stored in global scope	`true`	`false`	`false`
Function Scope	`true`	`true`	`true`
Block Scope	`false`	`true`	`true`
Can be re-assigned	`true`	`true`	`false`
Can be re-declared	`true`	`false`	`false`
Can be hoisted	`true`	`false`	`false`

Conclusion

Always use const if you do not want to change the variable.

Whenever you are using let first ask yourself if you are really changing the variable or do you really need to change it. If the answer is yes then use let else use const.

Always use 'const'. If you REALLY need to change state, use 'let'. 'var' is dead.

var should always be avoided because of hoisting.

In this blog we have learnt about

Why to avoid var.
What hoisting in javascript is.
What Immediately Invoked Function Expression (IIFE) is and how to use it.
How to decide between using let and const.

Conclusion

I hope this post saved your time and life. If you liked the post, feel free to share it to help others find it!

You may also want to read Getting Started with Git - A beginner's guide

You may also follow me on LinkedIn and Twitter.

💌 If you’d like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Building RESTful API using Nodejs and Express

Pratap Sharma — Fri, 11 Jun 2021 09:21:49 +0000

Working on the front-end using HTML, CSS & Javascript and wondering how RESTful API works in the backend. Then you can start working on it using Nodejs.

What is Nodejs?

Node.js is a server-side programming framework built on Chrome's JavaScript engine, which provides event-driven and non-blocking I/O. The coding is done in Javascript, and its latest version is v11.9.0. Read the docs for further information.

Nodejs installation guide:

Download the Nodejs application from the official Node.js official site: https://nodejs.org/en/download/ Follow the steps depending on your OS.
After installation, check for the version of Node and NPM using the command in your terminal NPM is the Node Package Manager and is a tool for installing, uninstalling and maintaining package modules for your app. NPM is installed along with Node:

node -v
npm -v

After verifying the versions of both Node and NPM, now create a new folder for our server.
Run the below commands in your terminal to create a new folder, and inside a folder, create one new file, index.js.

$ mkdir SampleServer
$ cd SampleServer
SampleServer$ touch index.js

After successfully creating folders and files, run the following code:

SampleServer$ npm init -y

Running the command npm will create a new file package.json.

package.json - It holds various metadata/dependencies relevant to the project. This file gives information to npm, which allows it to identify the project and handle the project's dependencies.

After configuring Node and npm, now it's time to install express. ExpressJS is a web framework for Node that provides you with a simple API to build websites, web apps and backends. With ExpressJS, you don't need to worry about low-level protocols, processes, etc. In order to install express, run the following command to add the framework.

SampleServer$ npm install --save express

This will add all the dependency of express in the server application.

Now it's finally time to write some codes. Add the following code to your index.js file.

var express = require('express')
const app = express()
app.get('/', res, req => {
res.send("Hello world!")
})
app.listen(3000, function() {
console.log('App running in port 3000');
});

A variable name 'express' is holding a new express application.
app.listen(3000) implies that the server is listening local in port number 3000. Now run the server by using the following command.

SampleServer$ node index.js

Now request the server which you've just created from the browser.

You successfully created a sample server.

Few important express methods to be familiar with:

app.listen(): To listen to the server in a particular port.
app.get(): The GET method requests data from the server. Requests using the GET method should only retrieve data and should have no other effect.
app.post(): The POST method requests the server to accept data that is enclosed in the request as a new object/entity of the resource identified by the URI.
app.put(): The PUT method requests the server to accept the data enclosed in the request as a modification to existing data identified by the URI. In case data does not exist, then the PUT method should create one.
app.delete(): It is a delete method for express. The DELETE method requests the server to remove/delete the specified resource.

Did you enjoy this? Please give it a like so others can discover it as well.

Useful Git commands that may save your life

Pratap Sharma — Fri, 11 Jun 2021 02:41:30 +0000

Git commands aren't always easy. If they were, we would have these commands at our disposal. They would be super helpful for performing everyday tasks like creating or renaming a git branch, removing files, and undoing changes.

In this post, I’m focusing on major git commands that gets all (almost) your work fulfilled.

How to undo the most recent local commits in Git?

You can run

$ git reset HEAD~1

You can even undo your commit but leave your files and your index:

$ git reset --soft HEAD~1

If you want to permanently undo the commit and you have cloned some repository:
To get commit id:

$ git log

$ git reset --hard <commit_id>

$ git push origin <branch_name> -f

How to undo a public commit?

You can just run

$ git revert HEAD

How to delete a Git branch locally and remotely?

Deleting local branch

$ git branch -d <branchname>

Deleting remote branch

$ git push origin --delete <branch>

How to revert to a particular commit?

To revert to a particular commit you'll need a commit id. To get a commit id just run

$ git log

Then copy the commit id you want to rever back to. And then run:

$ git revert <commit-id>

How Undo a git stash?

You can just run:

$ git stash pop

and it will unstash your changes.

In case you want to preserve the state of files (staged vs. working), use

$ git stash apply --index

How to undo 'git add' before commit?

You can undo git add before commit with

$ git reset <file>

To unstage all due changes

$ git reset

How to rename a local Git branch?

$ git branch -m <oldname> <newname>

To rename current branch

$ git branch -m <newname>

How to discard unstaged changes in Git?

For all unstaged files

$ git checkout -- .

For a specific file

git checkout -- path/to/file/to/revert

Note: -- here to remove argument ambiguation.

How to delete all tags from a Git repository?

To delete remote tags simply do:

$ git tag -l | xargs -n 1 git push --delete origin

and then delete the local copies of tag:

$ git tag | xargs git tag -d

Conclusion

I hope this post saved your time and life. If you liked the post, feel free to share it to help others find it!

You may also want to read Getting Started with Git - A beginner's guide

You may also follow me on LinkedIn and Twitter.

💌 If you’d like to receive more tutorials in your inbox, you can sign up for the newsletter here.

10 effective tips for New Developers

Pratap Sharma — Wed, 09 Jun 2021 15:37:03 +0000

Habits are the key to success. If you want to run a marathon, you better make it a habit to run every day.

Same goes for programming. If you want to become a great programmer, then you need to code every day and implement at least these habits.

Having good day-to-day habits are very crucial to reach your goal. These habits will skyrocket your efficiency. These are the habits which I follow in my every daily life.

1. Exercise/work-out daily

Take out some time to play sports or work out as a healthy body and a healthy mind are essential to be able to code for longer hours. This will improve your productivity.

2. Do Projects

If you do projects regularly, you will dramatically improve your skills as a developer.

3. Eat the frog first

Always do the task you hate the most first. After finishing it, that will be your ahaa! moment. You'll have time to think it clearly for the rest of the day.

4. Stay Hydrated

Always have a bottle of water next to you. Having so will help you keep hydrated and increase your productivity.

5. Understand the Code

Next time you copy code from Stack Overflow try to understand how the code you're copying works. Try to read each line of code as a story. Every line you copy or write has to have some story.

6. Invest in your self

Always invest in yourself. Your brain is your biggest asset in life. Invest time in learning new technology, develop your skills. Invest in books, courses, mentors.

7. Solve online coding problems

Solving online coding problems is the most crucial habit which will be very very useful to develop your logic and problem-solving skills. The more problem you solve, the more you'll build your skills.

8. Contribute to open-source

The more you contribute to the open-source project, the more you learn. This is also the best way to learn to work with others.

9. Read books (most important)

A good book will give you an overview of a specific field, and guide you through the author's angle from the start to the end of a topic. It's like keeping your feet in someone else shoes.

10. Communicate with others

Communication comes into play when writing documentation for frameworks and libraries you've worked on, or when sending emails or slack messages to coworkers. Communication is an essential factor in how two or more people convey complex ideas and concepts to each other, which is core to collaborating as a software developer. As a developer, you will work as a group.

Teach other developers (Additional)

Teaching is the best way to learn. If you teach or help others, the better you'll become in understanding the basics. I spend 2-3 hours of my day teaching/helping others.

To sum it up

Habits are who you are. Improving your practices will drastically help you in becoming a better developer.

I hope these tips will help you improve your habits.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

You may also follow me on LinkedIn and Twitter.

Please don't hesitate to drop a comment here if you want to discuss any of these tips. I'll be happy to know what helps you become a better programmer.

Tips and Tricks in Javascript

Pratap Sharma — Wed, 09 Jun 2021 03:31:05 +0000

In this article, let us cover some tips and tricks of Javascript everyone should be aware of.

Convert to boolean

All values in javascript are truthy except for 0, "", null,undefined, NaN and of course false.

We can easily switch between true and false by using the negative operator(!), which also converts the type to boolean.

console.log(!0); //true
console.log(!1); //false
console.log(!!0); //false
console.log(!undefined); //true

Amazing right?

Convert to Number

Converting to number can be easily achieved using the addition operator (+).

let num = "10";
console.log(num); // "10"
console.log(typeof num); // "string"

num = +num;

console.log(num); // 10
console.log(typeof num); // "number"

How cool is that?

Quick float to integer

There are several ways to convert float to an integer by using Math.floor(), Math.ceil() or Math.round(), but there is also a quicker way to convert a float to an integer by using the bitwise OR operator (|).

console.log(11.5 | 0); // 11
console.log(-11.5 | 0); // -11

Wow! Amazing right? I started using this more frequently now.

Short-Circuit Evaluation

Using &&

Using && will return the first false or falsy value. If every operand is expected to be true, then the last evaluated expression will be returned.

console.log(true && true && 2); // 2
console.log(true && false && 2); // false

Using ||

Using || will return the first true of truthy value. If every operand is expected to be false, then the last evaluated expression will be returned.

console.log(true || false || 2); // true
console.log(false || false || 2); // 2

Short-Circuit evaluation is widely used in any programming language.

Filter unique values from an array

You can easily find unique values using the Set data structure. The Set was introduced in ES6 along with the spread operator (...). Let us use both the new concept to filter unique values of an array.

I know you'll use this a lot. You can thank me later. 😄

let arr = [1, 1, 2, 3, 4, 4, 5, 2, 3, 6];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [ 1, 2, 3, 4, 5, 6 ]

Self calling function or IIFE

IIFE - Immediately Invoked Function Expression

This is often called as Self-Invoked Annonymous Function or IIFE. It is a function that executes automatically when it gets created.

(function () {
  console.log("I am running automatically");
})();

//I am running automatically

You can read more about IIFE here.

Get a random item from an array

We can use Math.random() and Math.floor() methods to get a random item from an array.

let names = ["Pratap", "Prasar", "Sudip", "Shiva"];

let randomName = names[Math.floor(Math.random() * names.length)];

It is also one of the most commonly used tricks.

Primitive operations can be faster than function calls

Keep in mind that primitive operations can be faster than function calls.

Instead of using

const min = Math.min(a, b);

use

const min = a < b ? a : b;

Empty an array

You can empty an array using the array.length property.

let dumarray = [1, 1, 2, 3, 4, 5, 6, 7];
dumarray.length = 0;

console.log(dumarray); // []

To sum it up

This is it from this article. I hope I'm able to help you with top Javascript tips and tricks.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Please don't hesitate to drop a comment here if I miss anything. Also, let me know if I can make the post better.

DEV Community: Pratap Sharma

My Journey as a Lead Engineer at Rippey AI

Introduction

Transitioning to Lead Engineer

The Promotion

Initial Challenges

Key Responsibilities

Leading Development

Mentorship

Major Projects and Achievements

Rippey.ai Development

Enhancing Inter-Service Communication

Security Overhaul

Lessons Learned

Leadership and Communication

Balancing Technical and Managerial Roles

Continuous Learning

Motivation and Future Goals

Driving Innovation

Team Success

Personal Growth

Conclusion

How to Provide Better Task Estimations for Your Team?

Understand and Compensate for Bias

Use Broader Value Ranges

Group Estimations and Discussions

Agile and Continuous Delivery

Ponderation Sheets for Legacy Projects

T-Shirt Sizing for Younger Projects

Retrospectives

Consider the Working Environment

Conclusion

Understanding Proxies: The Differences Between Forward and Reverse Proxies

Introduction

What is a Forward Proxy?

What is a Reverse Proxy?

Why is Nginx called a “reverse” proxy?

Benefits of Forward and Reverse Proxies

Forward Proxy vs Reverse Proxy

Conclusion

Read more articles

useMemo - React Hooks Series

What is useMemo hook?

When to Use useMemo?

Example

Wrapping up

useEffect - React Hooks Series

What is useEffect hook?

Few examples of side effects

What does useEffect hook do?

Does useEffect run after every re-render?

Example

Using class component

Using functional component

Getting deeper

Wrapping up

useState - React Hooks Series

Why do we prefer functional component over class component in react

What is Hooks?

What is useState Hook?

Example

Conclusion

Deep dive into Asynchronous Javascript

What is synchronous?

What is asynchronous?

Why Asynchronous Javascript?

Different ways of Asynchronous programming

Callback

Promises

basic syntax of promise in javascript.

Consuming a promise

Chaining of promises

Promise.all

Promise.race

Async/Await

async

await

Catching error in async/await

Conclusion

FURTHER READING

What is `useMemo` hook?

When to Use `useMemo`?

What is `useEffect` hook?

What does `useEffect` hook do?