DEV Community: Pramod K 💻

Polyfills Cont...

Pramod K 💻 — Fri, 20 Jan 2023 07:20:54 +0000

Implement the pipe() polyfill

if (!Function.prototype.pipe) {
  Function.prototype.pipe = function (fn) {
    return (...args) => fn(this(...args));
  };
}

You can use it like this:

const add = (a, b) => a + b;
const double = (x) => x * 2;
const addThenDouble = add.pipe(double);
console.log(addThenDouble(1, 2)) //6

Implement the publisher-subscriber pattern in javascript

class EventEmitter {
  constructor() {
    this.subscribers = new Map();
  }

  subscribe(event, callback) {
    if (!this.subscribers.has(event)) {
      this.subscribers.set(event, []);
    }
    this.subscribers.get(event).push(callback);
  }

  unsubscribe(event, callback) {
    if (this.subscribers.has(event)) {
      this.subscribers.set(event, this.subscribers.get(event).filter((cb) => cb !== callback));
    }
  }

  emit(event, data) {
    if (this.subscribers.has(event)) {
      this.subscribers.get(event).forEach((callback) => callback(data));
    }
  }
}

You can use it like this:

const eventEmitter = new EventEmitter();

const callback1 = (data) => console.log("Event 1:", data);
const callback2 = (data) => console.log("Event 2:", data);

eventEmitter.subscribe("event1", callback1);
eventEmitter.subscribe("event2", callback2);

eventEmitter.emit("event1", { message: "Hello World!" });
// Output: "Event 1: { message: 'Hello World!' }"

eventEmitter.emit("event2", { message: "Hello World!" });
// Output: "Event 2: { message: 'Hello World!' }"

eventEmitter.unsubscribe("event1", callback1);
//unsubscribe from an event

Implement the Array.map method on the Array Prototype

Array.prototype.map = function(callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        newArr.push(callback(this[i], i, this));
    }
    return newArr;
};

*** Implement the Array.filter method on the Array Prototype***

Array.prototype.filter = function(callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            newArr.push(this[i]);
        }
    }
    return newArr;
};

Implement the Array.reduce method on the Array Prototype

Array.prototype.reduce = function(callback, initialValue) {
    var accumulator = initialValue !== undefined ? initialValue : this[0];
    for (var i = initialValue !== undefined ? 0 : 1; i < this.length; i++) {
        accumulator = callback(accumulator, this[i], i, this);
    }
    return accumulator;
};

Implement the Array.forEach method on the Array Prototype

Array.prototype.forEach = function(callback) {
    for (var i = 0; i < this.length; i++) {
        callback(this[i], i, this);
    }
};

Implement the Function.bind method on the Function Prototype

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    return function() {
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply(context, finalArgs);
    };
  };
}

Polyfill - Cross-Browser Support

Pramod K 💻 — Wed, 18 Jan 2023 10:54:42 +0000

What are Pollyfills

Pollyfills are a way to add support for newer JavaScript features in older browsers, such as Internet Explorer (IE). In this blog post, we will be discussing some of the most useful pollyfills for React that can be used to ensure compatibility with IE.

Note:

Using too many pollyfills in a project can have a negative impact on the performance, it's always a good idea to test the performance and decide which ones are necessary.

Lets begin then

A pollyfill is a JavaScript library that allows you to use modern JavaScript features in older browsers that do not natively support them. It essentially "fills in the gaps" in older browsers' support for newer web technologies. They are used to ensure that web applications work correctly in older browsers and reach a wider range of users.

Pollyfills are designed to be used in conjunction with feature detection, which is a technique that allows you to check if a specific feature is supported by the user's browser. If the feature is not supported, the pollyfill is loaded and used as a substitute. This approach ensures that the web application works correctly in older browsers, but also takes advantage of the native support for the feature in modern browsers, which can result in better performance.

Pollyfills can be used for a wide range of features, such as:

ECMAScript features, like Promise, Object.assign(), Array.prototype.includes()
Web APIs, like Fetch, XMLHttpRequest, WebSockets
HTML5 elements, like canvas, audio, video
CSS3 features, like media queries, transitions, animations

It's also worth noting that, while pollyfills can be a great solution for adding support for older browsers, they can also have a negative impact on performance and how ???

Increased file size: Pollyfills are JavaScript libraries that need to be loaded along with your application, which can increase the overall file size of your application, resulting in slower page load times.
Extra processing time: Pollyfills need to be parsed and executed by the browser, which can require additional processing time, especially on older or less powerful devices.
Testing: When using pollyfills, you should always test them on the targeted browsers to ensure that they work as expected and don't have a negative impact on performance.
Some pollyfills might have their own dependencies, which need to be loaded and executed along with the pollyfill

How to use then 🤔

Once you have identified the pollyfills that are needed for your React application to work in IE, the next step is to implement them in your codebase. There are different ways to use pollyfills, but one of the most common ways is to use a package manager, such as npm or yarn, to install the pollyfill packages and import them into your codebase.

Here are some example of how to use the Object.assign(), includes(), Promise's, Compose pollyfill in a React application:

Install the Object.assign() pollyfill package using npm or yarn:

npm install object.assign --save
or
yarn add object.assign

Import the Object.assign() pollyfill in the entry file of your application (usually index.js or app.js):

import 'object.assign/polyfill';

Use the Object.assign() method as you would normally in your code:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = Object.assign(obj1, obj2);
console.log(obj3); // { a: 1, b: 2 }

Array.prototype.includes()

Install the array.prototype.includes pollyfill package using npm or yarn:

npm install array.prototype.includes --save
or 
yarn add array.prototype.includes

import 'array.prototype.includes';

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

Promise

Install the es6-promise pollyfill package using npm or yarn:

npm install es6-promise --save
or
yarn add es6-promise

import 'es6-promise/auto';

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 1000);
});

promise.then(console.log); // "Hello, World!"

Implement the compose() polyfill

if (!Function.prototype.compose) {
  Function.prototype.compose = function (fn) {
    return (...args) => this(fn(...args));
  };
}

const add = (a, b) => a + b;
const double = (x) => x * 2;
const addAndDouble = add.compose(double);
console.log(addAndDouble(1, 2)) //6

React Hook Mistakes Beginners Make

Pramod K 💻 — Wed, 28 Dec 2022 18:45:45 +0000

It is important to consider performance in React applications because it can have a significant impact on the user experience. Poor performance can lead to slow rendering times, which can make your application feel sluggish and unresponsive. In addition, performance issues can lead to increased resource consumption on the client side, which can drain battery life and bandwidth on mobile devices.

so here are my top mistakes or takeaway as a beginner you can improve while coding

use of useState when only required

consider below form submission code

import React, {useState} from 'react'


export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const onSubmitHandler = (e) => {
    e.preventDefault();
    console.log(email, password);
  };
  return (
    <div>
      <form onSubmit={onSubmitHandler}>
        <input
          placeholder="Enter email"
          type="email"
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
        />
        <input type="submit" />
      </form>
    </div>
  );
}

The above is a simple Login component with 2 states name and password
but do we really need those states because we can control the functionality without using any state and can optimize for better as below

import React, { useRef } from 'react';

export default function Login() {
  const emailref = useRef();
  const passwordref = useRef();
  const onSubmitHandler = (e) => {
    e.preventDefault();
    const data = {
      email: emailref.current.value,
      password: passwordref.current.value,
    };
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={onSubmitHandler}>
        <input placeholder="Enter email" type="email" ref={emailref} />
        <input type="password" placeholder="Password" ref={passwordref} />
        <input type="submit" />
      </form>
    </div>
  );
}

calling setState does not immediately mutate the component's state. Instead, it schedules an update to the component's state and tells React that it needs to re-render the component. The actual update and re-rendering of the component will take place asynchronously, at a later time.

This means that you should not rely on the state being updated immediately after calling setState. If you need to perform an action that depends on the updated state, you should either pass a callback function to setState as the second argument or use the useEffect Hook to perform the action after the component has re-rendered.

// Using a callback function
this.setState({ count: this.state.count + 1 }, () => {
  console.log(this.state.count); // This will log the updated value of count
});

// Using useEffect
useEffect(() => {
  console.log(count); // This will log the updated value of count
}, [count]); // The effect will run when count changes

It's important to be mindful of the dependencies you specify in the dependency array for the useEffect Hook. If you include a dependency that does not actually change between renders, this can cause the effect to run unnecessarily on every render. This can lead to performance issues and unexpected behavior.

Here is an example of an unnecessary useEffect that runs on every render:

import { useEffect, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('Hello');

  // This effect will run on every render, even though the message is not changing
  useEffect(() => {
    console.log('The message is:', message);
  }, [message]);

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

To fix this issue, you can simply remove the unnecessary dependency from the dependency array. In this case, the effect does not actually depend on the value of message, so it can be removed from the dependency array

Referential equality mistakes

In React, referential equality mistakes can occur when a component's props or state are updated in a way that causes the component to re-render, but the new props or state do not actually change the component's behavior.
One common mistake is updating a component's props or state with new object or array references that have the same contents as the previous references, but are not actually the same objects. Because the references are different, React will treat the props or state as having changed, and the component will re-render. However, because the actual contents of the objects or arrays are the same, the component's behavior will not change, leading to unnecessary re-renders.
To avoid this mistake, you can use the shouldComponentUpdate lifecycle method to compare the current and next props or state and return false if they are equal. You can also use the React.memo higher-order component to wrap a functional component and only re-render it if its props have changed.
Another common mistake is using the wrong comparison operator when comparing props or state in a component's render method. For example, using == instead of === to compare values can cause a component to re-render unnecessarily. It is important to use the strict equality operator (===) when comparing values in React, as it ensures that the types of the values are also compared.
Finally, it is important to be mindful of the order in which props and state are compared. If a prop or state value is being compared to itself, it should be compared to the previous value, not the current value. For example:

if (this.props.value !== prevProps.value) {
  // do something
}

Not aborting fetch requests

In a React application using hooks, you can use the useEffect hook to cancel ongoing fetch requests when a component unmounts or when certain dependencies change.

Here is an example of how you can use the AbortController API to cancel a fetch request when a component unmounts:

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('/data', { signal })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch request was cancelled');
        } else {
          console.error(error);
        }
      });

    return () => controller.abort();
  }, []);

  return (
    // render the component using the data
  );
}

In this example, the useEffect hook is called with an empty array of dependencies, which means that it will only be executed once, when the component mounts. The AbortController and its signal are created inside the useEffect hook, and the fetch request is made using the signal. The useEffect hook also returns a function that cancels the fetch request by calling the abort method on the AbortController when the component unmounts.
You can also use the useEffect hook to cancel a fetch request when certain dependencies change. For example

import { useEffect, useState } from 'react';

function MyComponent({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch(url, { signal })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch request was cancelled');
        } else {
          console.error(error);
        }
      });

    return () => controller.abort();
  }, [url]);

  return (
    // render the component using the data
  );
}

In this example, the useEffect hook is called with the url prop as a dependency. This means that the useEffect hook will be executed whenever the url prop changes, and the fetch request will be cancelled and a new request will be made using the updated url.

ReactJS Best Practices

Pramod K 💻 — Tue, 27 Dec 2022 23:56:16 +0000

Use functional components instead of class-based components whenever possible. Functional components are easier to read, test, and maintain.
Hooks: Use the React Hooks API to manage state and side effects in functional components. Hooks allow you to reuse stateful logic and avoid the need to write complex class-based components.
Use the React Context API to pass data down the component tree without the need for props drilling. This can make your components more reusable and easier to understand.
Use the React memoization API to prevent unnecessary re-renders of functional components. This can improve the performance of your application and prevent unnecessary updates to the DOM.
Use the React Debugger in your browser’s developer tools to track down issues in your code. The React Debugger allows you to inspect the component tree, view the current state and props of components, and trace the flow of data through your application.
Use a linter, such as ESLint, to enforce consistent coding styles and catch potential errors in your code. This can help you write cleaner, more maintainable code.
Use a testing framework, such as Jest, to write and run unit tests for your React components. This can help you catch bugs early on and ensure that your code is working as intended.
Use a code formatter, such as Prettier, to automatically format your code according to a set of predefined rules. This can help you maintain a consistent codebase and save time on manual formatting tasks.
Use a version control system, such as Git, to track changes to your code and collaborate with other developers. This can help you manage your codebase and make it easier to roll back changes if needed.
Use a state management library, such as Redux or MobX, to manage the global state of your application. State management libraries can make it easier to manage complex state in large applications and improve the performance of your application.
Use a bundler, such as Webpack, to optimize your application for production. Bundlers can minify your code, remove unused code, and optimize your assets to improve the performance of your application.
Use a code splitting library, such as React Loadable or React.lazy, to split your application into smaller, more manageable chunks. This can improve the performance of your application and make it easier to maintain
Use the React Profiler to identify performance issues in your application. The React Profiler allows you to see how long it takes for your components to render and identify any bottlenecks in your code.
Use the React.StrictMode component to identify potential problems in your application. StrictMode can help you catch deprecated APIs, accidental side effects, and other issues that may not be immediately apparent.
Use the React.Fragment component to return multiple elements from a component without adding extra nodes to the DOM. This can help you avoid unnecessary wrapper elements and keep your component hierarchy clean and easy to understand.
Use the React.memo higher-order component to memoize functional components and prevent unnecessary re-renders. This can improve the performance of your application and prevent unnecessary updates to the DOM.
Use the React.lazy and React.Suspense components to implement code-splitting and lazy loading in your application. This can improve the performance of your application and make it easier to maintain.

Implement authentication and authorization in a ReactJS application

Pramod K 💻 — Thu, 22 Dec 2022 07:30:46 +0000

There are many ways to implement authentication and authorization in a ReactJS application. Here is one approach you can follow:

Decide on the type of authentication you want to implement. Options include:
- Basic authentication: This involves sending the user’s login credentials (username and password) with every request.
- OAuth: This is a protocol that allows users to authenticate with a third-party service (such as Google or Facebook) and authorize your application to access their data.
- JSON Web Token (JWT): This is a type of token-based authentication that involves sending a signed token with each request to verify the user’s identity.
Choose an authentication method and set up a server to handle the authentication process. This can involve setting up a database to store user accounts, creating routes to handle login and logout requests, and implementing the logic to verify user credentials and issue tokens.
In your ReactJS application, create a login form for the user to enter their credentials. When the form is submitted, send a request to your authentication server with the user’s credentials.

If the authentication is successful, the server will issue a token and send it back to the client. Store the token in a secure way (such as in an HTTP-only cookie or in the browser’s local storage).
On subsequent requests, include the token in the authorization header. The server can then use the token to verify the user’s identity and grant or deny access to protected routes or resources.
To implement authorization, you can assign roles to users and check the user’s role when they make a request. For example, you might have a route that is only accessible to users with the “admin” role. In this case, you would check the user’s role on the server and return a 403 Forbidden response if the user is not authorized.

Here are the some examples how you can implement some

On the server side, set up a route to handle login requests. This route will verify the user’s credentials and issue a JWT if the login is successful. Here is an example using Node.js and Express:

app.post('/login', (req, res) => {
 const { username, password } = req.body;
// Verify the user's credentials (omitted for brevity)
 const user = findUser(username, password);
 if (!user) {
 return res.status(401).json({ error: 'Invalid login credentials' });
 }
 If the login is successful, issue a JWT
 const payload = { userId: user.id, role: user.role };
 const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });
 res.json({ token });
});

In your ReactJS application, create a login form and handle the form submission by sending a request to the login route with the user’s credentials. Here is an example using the fetch API:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Send a POST request to the login route
    const response = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });

    // If the login is successful, store the JWT in local storage
    if (response.ok) {
      const { token } = await response.json();
      localStorage.setItem('token', token);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input type="text" id="username" value={username} onChange={(event) => setUsername(event.target.value)} />
      <br />
      <label htmlFor="password">Password:</label>
      <input type="password" id="password" value={password} onChange={(event) => setPassword(event.target.value)} />
      <br />
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

On subsequent requests, include the JWT in the authorization header. Here is an example using the fetch API again:

async function makeAuthenticatedRequest(url, options = {}) {
  // Get the JWT from local storage
  const token = localStorage.getItem('token');

  // Add the JWT to the authorization header
  const headers = { ...options.headers, Authorization: `Bearer ${token}` };
  const authenticatedOptions = { ...options, headers };

  // Send the request
  return fetch(url, authenticatedOptions);
}

Protect sensitive routes and resources on the server by requiring an authenticated user. For example, you might set up a middleware function to verify the JWT on each request and only allow access to protected routes if the token is valid. Here is an example using Node.js and Express:

function verifyToken(req, res, next) {
  // Get the authorization header
  const authorizationHeader = req.headers.authorization;
  if (!authorizationHeader) {
    return res.status(401).json({ error: 'No authorization header' });
  }

  // Extract the JWT from the authorization header
  const token = authorizationHeader.split(' ')[1];
  if (!token) {
    return res.status(401).json({ error: 'Invalid authorization header' });
  }

  // Verify the JWT and attach the payload to the request object
  try {
    const payload = jwt.verify(token, process.env.JWT_SECRET);
    req.user = payload;
  } catch (error) {
    return res.status(401).json({ error: 'Invalid token' });
  }

  next();
}

app.get('/protected-route', verifyToken, (req, res) => {
  // Only authenticated users with a valid JWT can access this route
  res.json({ data: 'Secret information' });
});

Implement logout by removing the JWT from storage and redirecting the user to the login page. Here is an example using the useHistory hook from the react-router-dom library:

import { useHistory } from 'react-router-dom';

function LogoutButton() {
  const history = useHistory();

  const handleClick = () => {
    // Remove the JWT from storage
    localStorage.removeItem('token');

    // Redirect the user to the login page
    history.push('/login');
  };

  return <button onClick={handleClick}>Logout</button>;
}

To implement authorization, you can assign roles to users and check the user’s role when they make a request. For example, you might have a route that is only accessible to users with the “admin” role. In this case, you would check the user’s role on the server and return a 403 Forbidden response if the user is not authorized. Here is an example using the verifyToken middleware function from earlier:

app.get('/admin-route', verifyToken, (req, res) => {
  // Only authenticated users with the "admin" role can access this route
  if (req.user.role !== 'admin') {
    return res.sendStatus(403);
  }
  res.json({ data: 'Admin-only information' });
});

Here are a few tips for making your authentication and authorization implementation more secure:

Use strong passwords: Encourage users to use strong, unique passwords that are difficult to guess or crack. You can also consider implementing password policies to ensure that users are using secure passwords.
Use a secure method to transmit login credentials: When the user logs in, make sure to transmit their credentials over a secure connection (HTTPS). This will prevent attackers from intercepting the credentials as they are being sent.
Use a long-lived JWT: If you are using JWTs for authentication, consider using a long expiration time (e.g. one week or one month) to reduce the need for the user to log in frequently. However, be aware that this increases the risk of the JWT being stolen or compromised. In this case, you may want to implement a mechanism for revoking JWTs if necessary.
Use rate limiting: To prevent brute force attacks, you can implement rate limiting on your login route. This will limit the number of login attempts that can be made within a certain time period.
Use two-factor authentication (2FA): Implementing 2FA can add an extra layer of security to your authentication process. With 2FA, the user must provide an additional piece of information (such as a code sent to their phone) in addition to their password to log in.
Keep your software up to date: Make sure to keep your server-side software (e.g. the database, web server, etc.) up to date with the latest security patches to protect against vulnerabilities.

Class Component or Functional Component

Pramod K 💻 — Wed, 21 Dec 2022 15:42:29 +0000

In React, class components are JavaScript classes that extend the React.Component base class and contain a render() method, which returns a JSX element representing the component’s rendered output. Class components can also have state and lifecycle methods, which allow them to manage data and perform actions at specific points in the component’s lifecycle.

Functional components, on the other hand, are simple JavaScript functions that accept props as an argument and return a JSX element representing the component’s rendered output. They do not have state or lifecycle methods, and are typically used for presentational components that do not need to manage any internal data or perform actions at specific points in their lifecycle.

You should use class components when you need to manage state or perform actions at specific points in the component’s lifecycle. You should use functional components when you don’t need to manage state or perform actions at specific points in the component’s lifecycle, and you just want to render some UI based on props.

With the introduction of React hooks in version 16.8, it is now possible to use state and other React features in functional components as well. This means that you may not always need to use class components, and you can use functional components even if you need to manage state or perform actions at specific points in the component’s lifecycle.

Here is an example of a class component in React:

import React, { Component } from 'react';

class MyClassComponent extends Component {
  state = {
    count: 0
  };

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>Increment count</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

This class component has a state object that stores a count, and a method called incrementCount that increments the count by one. It also has a render method that returns a JSX element containing a button and a paragraph element displaying the current count.

Here is an equivalent functional component using React hooks

import { useState } from 'react';

function MyFunctionalComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
      <p>Count: {count}</p>
    </div>
  );
}

This functional component uses the useState hook to add state to the component. It has a variable called count that stores the current count, and a function called setCount that updates the count. It also has a JSX element that is similar to the one in the class component example.

I hope these examples help to illustrate the difference between class and functional components in React! Let me know if you have any other questions.

Custom Ng2-smart-table

Pramod K 💻 — Wed, 21 Dec 2022 15:40:10 +0000

ng2-smart-table is a library for Angular that allows you to easily create and customize data tables. It provides features such as sorting, filtering, pagination, and inline editing, as well as support for custom templates and data sources.

To use ng2-smart-table in an Angular project, you will need to install it using npm or yarn:

npm install ng2-smart-table --save

Then you can import the Ng2SmartTableModule in projectlike below

import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    Ng2SmartTableModule
  ],
  ...
})
export class MyModule { }

Can we customize to truncate that displays a truncated version of the myText input by default, and provides a Read More or '...’ button that allows the user to toggle between the truncated version and the full version of the text.

Lets give a try

To use the custom component in the ng2-smart-table column, you need to set the type property to 'custom' and the renderComponent property to the component class. You also need to bind the component's myText input to the cell data using the [myText] attribute.

lets assume we have text Lorem ipsum dolar sit amet, consectetur adipiscing sli. Aenean euismod bibendum laoreet.Proin gravida dolar sit amet lacus accumasan et viverra justo commodo pretty long right

we know this is very long to include in a cell but we can handle its display to add read more and read less

import { Component, Input } from '@angular/core';

@Component({
  template: `
    <div class="cell-component">
      <span *ngIf="isReadMore">
        {{ myText }}
        <button (click)="toggleReadMore()">Read Less</button>
      </span>
      <span *ngIf="!isReadMore">
        {{ myText | truncate: truncateLength }}
        <button (click)="toggleReadMore()">Read More</button>
      </span>
    </div>
  `
})
export class MyCellComponent {
  @Input() myText: string;
  isReadMore = false;
  truncateLength = 50;

  toggleReadMore() {
    this.isReadMore = !this.isReadMore;
  }
}

This is an Angular component that displays a string of text, along with a “Read More” or “Read Less” button. When the component first loads, the text is truncated to a certain length (50 characters by default) and the “Read More” button is displayed. When the user clicks the “Read More” button, the full text is displayed and the button changes to “Read Less”. When the user clicks “Read Less”, the text is truncated again and the button changes back to “Read More”.

The component has an input property called “myText”, which is the text that will be displayed in the component. The component also has a boolean property called “isReadMore” that determines whether the full text or the truncated text is displayed. There is also a property called “truncateLength” that determines the length at which the text will be truncated. The component has a method called “toggleReadMore()” that is called when the user clicks the “Read More” or “Read Less” button, and it simply toggles the value of “isReadMore” between true and false.

import { Component, Input } from '@angular/core';

@Component({
  template: `
    <div class="cell-component">
      <span *ngIf="isReadMore">
        {{ myText }}
        <button (click)="toggleReadMore()">Read Less</button>
      </span>
      <span *ngIf="!isReadMore">
        {{ myText | truncate: truncateLength }}
        <button (click)="toggleReadMore()">Read More</button>
      </span>
    </div>
  `
})
export class MyCellComponent {
  @Input() myText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo';
  isReadMore = false;
  truncateLength = 50;

  toggleReadMore() {
    this.isReadMore = !this.isReadMore;
  }
}

When the component first loads, the text will be truncated to 50 characters and the Read More button will be displayed. When the user clicks the Read More button, the full text will be displayed and the button will change to Read Less

When the user clicks the Read Less button, the text will be truncated again and the button will change back to Read More

ChatGPT, will it replace software engineers anytime soon?

Pramod K 💻 — Wed, 21 Dec 2022 15:30:34 +0000

ChatGPT is a language model developed by OpenAI that has the ability to generate human-like text. It has been trained on a large dataset of text and is able to generate coherent and realistic responses to a given prompt. In this blog post, we will explore the capabilities of ChatGPT and discuss its potential applications and limitations.

But What is ChatGPT?

ChatGPT is a variant of the GPT (Generative Pre-training Transformer) language model, which was developed by OpenAI. It is designed to generate human-like text by predicting the next word in a sequence based on the words that come before it.

One of the key features of ChatGPT is its ability to maintain the context of a conversation and generate responses that are relevant to the previous messages. This allows it to engage in coherent conversations with users and respond to a wide range of prompts

ChatGPT has a number of potential applications. Some examples include:

Chatbots: ChatGPT can be used to create chatbots that can engage in realistic conversations with users. This could be useful in a variety of settings, such as customer service or online education.
Content generation: ChatGPT can be used to generate text for a variety of purposes, such as news articles, social media posts, or marketing copy.
Code generation: ChatGPT can generate code that is syntactically correct and might even solve a given problem. This could potentially save time on tasks such as writing boilerplate code or generating code snippets.

Despite its impressive capabilities, ChatGPT has several limitations that should be considered.

Understanding: ChatGPT lacks the ability to understand the meaning of the words it generates and the context in which they are used. This means that it is limited to generating text based on patterns it has learned from its training data, rather than understanding the underlying concepts.
Creativity: ChatGPT is limited to the knowledge and information that it has been trained on, and is unable to come up with original ideas or think creatively.
Real-world constraints: ChatGPT is not aware of real-world constraints such as budgets, deadlines, or technical limitations, and cannot take them into account when generating text or code.

So will it replace Software developers from market?

No for now
It is important to note that ChatGPT is a language model and not a software engineer. While ChatGPT can generate code that is syntactically correct and might even solve a given problem, it lacks the ability to understand the constraints of real-world software development.

Software engineering involves much more than simply writing code. It involves designing and architecting systems, working with a team of developers, testing and debugging code, and understanding the needs and goals of the users of the software. It also involves ongoing maintenance and updates to the software. A language model like ChatGPT cannot replace the skills and knowledge that a human software engineer brings to the table.

Performance optimization techniques that can be applied to React applications to improve their performance

Pramod K 💻 — Wed, 21 Dec 2022 15:26:07 +0000

React is one of the most popular frontend frameworks used for developing user interfaces. Performance optimization is essential for building a successful React application. If performance issues are not addressed, it can lead to poor user experience, slow loading times, and ultimately, a failed application. Here are 10 performance optimization techniques that can be applied to React applications to improve their performance.

Memo

Use React.memo: React.memo is a higher order component that memoizes a functional component and skips re-rendering if its props remain the same. This is a great way to improve performance when a component is not changing its props.

const MyComponent = ({ user }) => {
  return <div>{user.name}</div>;
};

export default React.memo(MyComponent);

Use the useMemo Hook: useMemo is a hook that memoizes a value so it is not recalculated every render. This can be useful for optimizing expensive calculations that are used in components.

const MyComponent = ({ user }) => {
  const name = useMemo(() => {
    // Do an expensive calculation
    return user.name;
  }, [user]);

  return <div>{name}</div>;
};

Use React.PureComponent: PureComponent is similar to React.memo in that it skips re-rendering if its props remain the same. However, it works for class components, which can be more performant than functional components.

class MyComponent extends React.PureComponent {
  render() {
    const { user } = this.props;
    return <div>{user.name}</div>;
  }
}

Lazy loading

Use React.lazy and Suspense: React.lazy allows you to dynamically import components, which is a great way to improve performance by splitting up your code into smaller chunks. This can be combined with the Suspense component to show a fallback UI while the code is being imported.

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

shouldComponentUpdate / useEffect

Use shouldComponentUpdate: shouldComponentUpdate() is a lifecycle method that allows you to determine if a component should re-render or not. This can be useful for optimizing components that render expensive operations.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { user } = this.props;
    return user.name !== nextProps.user.name;
  }
  render() {
    const { user } = this.props;
    return <div>{user.name}</div>;
  }
}

Use the useEffect Hook: useEffect is a hook that allows you to determine if a component should re-render or not. This can be useful for optimizing components that render expensive operations.

const MyComponent = ({ user }) => {
  const [name, setName] = useState(user.name);
  const shouldUpdate = useRef(true);

  useEffect(() => {
    if (user.name !== name) {
      shouldUpdate.current = true;
      setName(user.name);
    } else {
      shouldUpdate.current = false;
    }
  }, [user.name]);

  useEffect(() => {
    if (shouldUpdate.current) {
      // Do something expensive
    }
  }, [name]);

  return <div>{name}</div>;
};

React Fragment

Use the React.Fragment Component: Fragments can be used to wrap multiple elements without adding extra nodes to the DOM. This can be useful for optimizing components with many elements.

const MyComponent = () => (
  <React.Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
  </React.Fragment>
);

callback hook

Use the useCallback Hook: useCallback is a hook that memoizes a function so it is not recreated every render. This can be useful for optimizing functions that are passed as props to child components.

const MyComponent = ({ user }) => {
  const handleClick = useCallback(() => {
    // Do something
  }, [user]);

  return <button onClick={handleClick}>Click me</button>;
};

Ref

Use the useRef Hook: useRef is a hook that allows you to create a mutable object that will persist between renders. This can be useful for optimizing components that need to store state that does not trigger a re-render.

const MyComponent = () => {
  const ref = useRef({ counter: 0 });

  ref.current.counter += 1;

  return <div>Counter: {ref.current.counter}</div>;
};

Context

Use the useContext Hook: useContext is a hook that allows you to access context from a component. This can be useful for optimizing components that need to access the same data from multiple components.

const MyContext = React.createContext();

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};