DEV Community: Phani Murari

🚀 Mastering the 10 Pillars of Front-End

Phani Murari — Fri, 22 Sep 2023 18:03:48 +0000

Dive into concise explanations, relatable examples, and handy code snippets for every essential concept a senior developer must know! 🔥

🔄 1. Event Loop

Explanation: The event loop checks if the call stack is empty. If so, it checks the message queue for waiting events and executes them.

Example: 🍳 Think of a chef (event loop) checking if there's a dish (task) ready. If yes, it's served. If not, they check for new orders (events).

Code:

console.log('First');
setTimeout(() => {
  console.log('Second');
}, 0);
console.log('Third');  // Outputs: First, Third, Second

📚 Official Resource

🎨 2. Critical Rendering Path

Explanation: The steps a browser follows to convert HTML, CSS, and JavaScript into visible pixels.

Example: 🏢 Think of constructing a building: foundation (DOM), design (CSSOM), and paint (rendering).

Official Resource: 📚 Google Developers - Critical Rendering Path

🖋️ 3. Let, Const, Var and Block Scoping

Explanation:

var: function-scoped, re-declarable, and updatable.
let: block-scoped, not re-declarable, but updatable.
const: block-scoped, neither re-declarable nor updatable.

Example: 🏫 In a classroom: sections (var), roll numbers in a section (let), and birth names (const).

Code:

var x = 10;
if(true) {
    var x = 20;  
    let y = 30;  
    const z = 40;
}
console.log(x);  // Outputs: 20

📚 Official Resource

🧠 4. Closure

Explanation: A function having access to its own variables, outer function's variables, and global variables.

Example: 🙋 A person remembering their name, family name, and celebrities' names.

Code:

function outer() {
  let outerVar = 'Outside!';
  function inner() {
    console.log(outerVar);
  }
  return inner;
}
const myClosure = outer();
myClosure();  // Outputs: Outside!

📚 Official Resource

🔄 5. Functional Programming

Explanation: A paradigm where functions are primary, emphasizing immutability and pure functions.

Example: 🥪 Making sandwiches using fresh ingredients and the same recipe.

Code:

const array = [1, 2, 3];
const double = array.map(item => item * 2);  // [2, 4, 6]

📚 Official Resource

🔍 6. This Keyword Behavior

Explanation: this refers to the object executing the current function. Its context varies.

Example: 🎓 In class, this student means the one answering.

Code:

const obj = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName();  // Outputs: John

📚 Official Resource

🛠️ 7. Frameworks Usage

Explanation: Frameworks offer a structure for faster development. Understand their core concepts and the problems they solve.

Example: 🚗 Use a car for long distances, not a short walk.

Official Resource: Varies, e.g., 📚 React Docs

👩‍👩‍👧 8. Prototypical Inheritance

Explanation: In JavaScript, objects inherit properties and methods from others. This is prototypical inheritance.

Example: 👪 Children inheriting traits from parents.

Code:

function Parent() {}
Parent.prototype.sayHello = function() {
  console.log('Hello from parent');
};

function Child() {}
Child.prototype = Object.create(Parent.prototype);
const child = new Child();
child.sayHello();  // Outputs: Hello from parent

📚 Official Resource

⌚ 9. Async, Await vs. Promises

Explanation:

Promises: Handle asynchronous operations with states (pending, fulfilled, rejected).
async/await: Makes asynchronous code look synchronous.

Example: 📅 Promise is like a task promise. Async/await marks it on a to-do list and waits.

Code:

// Promise
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

// async/await
async function fetchAndDisplay() {
  const data = await fetchData();
  console.log(data);
}

📚 Official Resource

⏲️ 10. Debounce vs Throttle

Explanation:

Debounce: Groups events if they're in quick succession.
Throttle: Executes a function at most once in a specified period.

Example: 🗣️ Debounce waits for someone to finish speaking. Throttle limits speech to once every minute.

Code: Using Lodash:

// Debounce
const debouncedSave = _.debounce(() => console.log('Saved'), 300);

// Throttle
const throttledSave = _.throttle(() => console.log('Saved'), 300);

📚 Official Resource

Best of luck with your interviews! 🍀🚀

React Hooks - useEffect()

Phani Murari — Fri, 21 Jul 2023 18:12:15 +0000

Hey HOOOKERRRR!!!! 👋

Today, we're diving into the magical world of React Hooks - focusing specifically on the useEffect() Hook. So buckle up and let's get this ride started! 🚀

Wait, what's `useEffect()`? 🤔

Great question! If you're familiar with lifecycle methods in class components like componentDidMount, componentDidUpdate, and componentWillUnmount, you can think of useEffect() as all these combined into one. Yes, you heard that right! One Hook to rule them all. 👑

But hold on, here comes the real kicker - useEffect() is for functional components. Now that's pretty neat, huh? 😲

Alright, I'm intrigued. But why should I use it?

Excited about useEffect(), but not sure why you'd want to use it? No worries! Let me break it down for you:

You know when you have to do something extra in your app like getting data from a server, changing something on the screen, or setting up an ongoing process? That's what we call 'side effects', and useEffect() is like a magic tool for handling these in functions. 🧰
Remember how in class components, you might have to write the same code in different lifecycle methods? useEffect() helps you avoid this repeat performance by allowing you to put your code in one place only. It's all about that tidy life! 🧹
Now let's talk about our good friend useState(). If you enjoyed how useState() made your code shorter and more readable, you're going to love useEffect() for the same reasons! It helps to keep your code neat, tidy, and easy on the eyes. 🌈

Feel like a superhero with Hooks yet? Let's fly into more details! 🚀

Let's get hands-on with `useEffect()`. 🔧

To use useEffect(), you need to call it with a function (which runs your side effect) and an array of dependencies. If any of the dependencies change, the effect will run again.

Here's the basic syntax:

useEffect(() => {
    // Your side effect goes here.
}, [/* your dependencies go here */]);

Example

Let's say we want to fetch a user's data from an API and display it. With useEffect(), it's a piece of cake:

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // We're using userId as a dependency

  return (
    <div>
      {user ? (
        <>
          <h1>{user.name}</h1>
          <p>{user.description}</p>
        </>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default UserProfile;

In this example, whenever userId changes, our effect will run, fetching the new user's data and updating the user state.

Cleaning up with `useEffect()`. 🧹

Sometimes, your effect might set up something that needs to be cleaned up before the component unmounts, or before the effect runs again. For that, you can return a cleanup function from your effect.

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      console.log('One second has passed!');
    }, 1000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

  // ...
}

In this case, if Timer were to unmount before the timeout finishes, the cleanup function would run and prevent the timeout callback from causing an error.

Pretty cool, right? 😎

For a more detailed look at useEffect(), you can always refer to the official React documentation here.

Happy coding! ✌️

Want to join me on this coding adventure beyond the blog?

I'm Phani Murari

Let's connect and keep the learning going 🚀

📸 Instagram - For behind-the-scenes, daily life and more tech tips.

💼 LinkedIn - For professional insights, my latest work updates, and networking opportunities.

Looking forward to meeting you in the digital world! 🌐

Coding vs Programming: Let's Clear the Confusion

Phani Murari — Sun, 16 Apr 2023 18:23:52 +0000

Hello Friends! 🙌

Welcome to the exciting world of technology! As newcomers, it's common to wonder about the difference between coding and programming. 🤔 To help you understand the distinction, we'll use a simple, relatable analogy and provide clear examples.

Picture yourself building a house. In this scenario, coding represents the bricklaying process, while programming encompasses the overall planning, design, and management of the construction. Intrigued? Let's explore each concept in more detail.

Coding: Writing the Instructions 🖥️

Coding is like learning a new spoken language such as Hindi, English, or Bengali. You're translating human-readable instructions into a language that computers can understand. This is done by writing code using a specific programming language like Python, Java, or C++.

A Simple Coding Example 🌟

Imagine you want to add two numbers using Python:

number1 = 5
number2 = 7

sum = number1 + number2

print("The sum of", number1, "and", number2, "is", sum)

Here, you write the code to add two numbers using Python's syntax. This is the essence of coding.

Programming: Solving Problems with Code 🧠

Programming goes beyond simply writing code. It's the process of designing, implementing, and maintaining a software solution to a problem. Programming includes problem-solving, designing algorithms, creating data structures, and understanding the logic behind the code. In short, programming involves coding, testing, debugging, and analyzing.

A Practical Programming Example 🔧

Picture yourself building an e-commerce website like Amazon or Flipkart. You would need to:

Understand the requirements (features, user interface, etc.)
Design the database and data structures
Develop algorithms for searching, sorting, and filtering products
Write the code (coding) in a programming language
Test and debug the code
Optimize performance
Deploy and maintain the website

In this example, programming involves a wide range of tasks, with coding being just one of many steps.

Wrapping It Up 🎁

Coding and programming are related but distinct concepts. While coding involves writing code in a programming language, programming is the comprehensive process of creating a software solution, including design, implementation, and maintenance. Grasping the difference between the two will not only help you communicate more effectively in the tech world but also allow you to decide which aspect you'd like to concentrate on as you learn and grow in the field.

I hope this article has made the distinction between coding and programming engaging, clear, and easy to understand. If you have any questions or need further clarification, please feel free to comment below, and I'll be happy to help! 😊

Happy learning, and best of luck on your tech journey! 🚀

Deploying Node Application using Render

Phani Murari — Thu, 23 Mar 2023 18:23:16 +0000

Are you ready to take your Node.js application to the next level 🚀?

If you're looking for a hassle-free simple step by step way to deploy your app and get it up and running in minutes, then you're in luck!

In this post, we're going to explore how to deploy a Node.js application using Render, a powerful cloud platform that makes deployment fast, easy, and reliable.

Whether you're a seasoned developer or just starting out, you'll find everything you need to know to get your application up and running in no time.

In this post we learn how to deploy a simple login Node application using the render.

Let's deploy the below sample Login Application to render.

Github Repository URL :

https://github.com/phanimurari/dev-post-sample-login-app.git

I highly recommend trying out the above GitHub repository and getting hands-on experience by deploying a sample login application locally.

Let's jump into deploying part

Step1:

Create a Account on Render

It is highly recommended to register on Render using your GitHub account as it enables seamless integration of your project repositories on GitHub with the Render services.

This will streamline the process of deploying and managing your applications on Render, allowing for a more efficient and convenient workflow.

Step2:

Click on New+ and select Web Service

Refer to the below screenshot for a better understanding.

Step3:

Let's create your project repository by clicking on the connect button.

Step 4:

Give a unique name for deployed node application
Select your Region
Select the branch where your code exists in the GitHub repository.
Select Run Time as Node(As your deploying the Node application)
Select Build Command that build your Node application, In my case it is installing the Node Modules.

Execute the below command to install the Node Modules.

npm install

Select Start Command that start your node application.

In my case executing the below command will start my node application.

nodemon index.js

Click on the Create Web Service button to create the web service.

Step 5

You simply wait for some time, till your deployed node application is built and deployed succesfully.

If any error during the build or depolying, you can check out those errors in the Logs as shown in the reference Screenshot.

Step 6

Testing the deployed Node Application APIs

Register API

Login API

I love to appreciate your enthusiasm to learn more.

Thanks for Reading!

I'm Phani Murari

Instagram
LinkedIn

Get Started with React Hooks

Phani Murari — Sun, 29 May 2022 19:23:42 +0000

Hello Everyone 👋!

In this post, let's learn about the React Hooks.

What is React Hooks ?

Hooks are a new addition in React 16.8. it will let you use state and other React features without writing a class.

Wait! Without class????? 😮

Yes, without class we can use React features using the React Hooks.

Okay! great but why React Hooks when i am super familiar with Classes.

Why React Hooks?

Check the below to understand why Frontend Dev's loves ❤️ the React Hooks.

Reduce the burden to think about whether we have to use the class component or function component, Always go with a function component ✌️
Reuse the logic between the components easily.
More power with less lines of code and many more.
Industry is moving towards and gradually adapting React Hooks.

I am hoping that you got some Good reason to learn React Hooks.

Let's understand the one of the basic hook - useState() provided by the React.

useState() ⚡

Let's understand the useState() hook by comparing with the state object in class component.

In class component we have the state object, we will store the data in the state that changes within the time.

But how to use state in the function component ❔

With the help of useState() hook you can add state to the function components as well.

Syntax

const [currentState, setterFun] = useState(initialValue)

Example

A simple Counter example to understand the implementation of useState hook

import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount(count + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;

We can update the state by using the callback function if the next state is computed based on the previous state

In the above counter example, the state incremented value is based on the previous state. Hence we have updated the state by using the callback function.

import { useState } from "react";

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Here count - currentState
  // Here setCount - setterFun

  const onClickButton = () => setCount((prevState) => prevState + 1);
  // When the button clicked incrementing the count(currentState) by 1

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClickButton}>Click me</button>
    </div>
  );
}

export default ClickCounter;

Let's understand how to declare the multiple state variables.

Yes, you can declare the multiple state variables using the useState hook multiple times as shown below.

const [stateVariableOne, setterFunForStateVariableOne] = useState(initialValue);
const [stateVariableTwo, setterFunForStateVariableTwo] = useState(initialValue);
const [stateVariableThree, setterFunForStateVariableThree] = useState(initialValue);

Refer to the official documentation of React Hooks - useState for a detailed understanding.

Thanks for Reading!

I love to appreciate your enthusiasm to learn more.

I'm Phani Murari

Instagram
LinkedIn

CodeIsPeace

When to use Class Component and Function Component??

Phani Murari — Sun, 09 May 2021 18:37:17 +0000

Hello Everyone,

In this post let's understand where to use the Class Component and Functional Component in react

Before diving, Let's start understanding what is a component in react?

Component

Websites or Web Applications developed using react is the combination and interlinking of different Components.

Components let you develop the UI of the website independently and even we can use reusable components to implement a similar UI.

React facilitates the developer with Class Component and Functional Components

Class Components

Class Components are built using ES6 Class

class Welcome extends React.Component {
  render() {
    return <h1>Super Excited to post my first post in Dev Community</h1>;
  }
}

Functional Component

The simplest way to write the Component in react is to write a JavaScript function

function welcome(props) {

 return <h1>Super Excited to post my first post in Dev Community</h1>;

}

We can use the Arrow Functions as well for the functional Components

const welcome = (props) => <h1>Super Excited to post my first post in Dev Community</h1>;

Hope we had a short and good recap about the Class and Functional Components

The above two components which are written in class and Functional Components are equivalent from React’s point of view.

Now the major question rises in your developer's mind!

When to use the Class Component and the Functional Component??

To answer this question we need to have a decent understanding of the state of the component.

To recall or revise the concept of the state of the component, I suggest you refer to this.

In class components, the render method will be called, whenever the state of the components changes. On the other hand, the Functional components render the UI based on the props.

Whenever we have the use case with the State of the component and rendering the UI based on the Component State, use the Class Components

Class Components should be preferred whenever we have the requirement with the state of the component.

In the beginner stage of the developer journey, we should be familiar with the Class Components and the Functional Components, As we progress towards the Advanced stage of our developer journey, We are able to understand much more cool stuff provided by React like Hooks

In React version > 16.8, React even facilitates developers with Hooks to use the state and other React features even without writing the Class Component

To know more about Hooks, Refer to this

I love to appreciate your enthusiasm to learn more.

Thanks for Reading!

I'm Phani Murari

Instagram
LinkedIn

DEV Community: Phani Murari

🚀 Mastering the 10 Pillars of Front-End

Dive into concise explanations, relatable examples, and handy code snippets for every essential concept a senior developer must know! 🔥

🔄 1. Event Loop

🎨 2. Critical Rendering Path

🖋️ 3. Let, Const, Var and Block Scoping

🧠 4. Closure

🔄 5. Functional Programming

🔍 6. This Keyword Behavior

🛠️ 7. Frameworks Usage

👩‍👩‍👧 8. Prototypical Inheritance

⌚ 9. Async, Await vs. Promises

⏲️ 10. Debounce vs Throttle

React Hooks - useEffect()

Hey HOOOKERRRR!!!! 👋

Wait, what's useEffect()? 🤔

Alright, I'm intrigued. But why should I use it?

Let's get hands-on with useEffect(). 🔧

Cleaning up with useEffect(). 🧹

I'm Phani Murari

Coding vs Programming: Let's Clear the Confusion

Coding: Writing the Instructions 🖥️

A Simple Coding Example 🌟

Programming: Solving Problems with Code 🧠

A Practical Programming Example 🔧

Wrapping It Up 🎁

Deploying Node Application using Render

Are you ready to take your Node.js application to the next level 🚀?

I'm Phani Murari

Get Started with React Hooks

Hello Everyone 👋!

What is React Hooks ?

Why React Hooks?

useState() ⚡

Let's understand how to declare the multiple state variables.

I'm Phani Murari

CodeIsPeace

When to use Class Component and Function Component??

Hello Everyone,

Component

Class Components

Functional Component

When to use the Class Component and the Functional Component??

I'm Phani Murari

CodeIsPeace

Wait, what's `useEffect()`? 🤔

Let's get hands-on with `useEffect()`. 🔧

Cleaning up with `useEffect()`. 🧹