DEV Community: Manish Baral

How to install Node on cPanel shared hosting (without root access)

Manish Baral — Tue, 18 Jun 2024 09:37:31 +0000

You will need to have access to an SSH command line; not all hosts allow this. I’ve tested this on VentraIP but it may work on other hosts too.

You’ll need to login via SSH and then run the following commands from the home folder:

Or you can use the terminal that is in cPanel.

(Change the version numbers in the commands below if you’d like to use a more recent version.)

# Make a new folder for node
mkdir node
cd node
# Download and unzip node
curl -O https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.gz
tar -xvzf node-v10.15.3-linux-x64.tar.gz --strip-components=1
# Add node and npm it to PATH (and do so for future sessions too)
export PATH=$HOME/node/bin:$PATH
echo 'export PATH=$HOME/node/bin:$PATH' >> ~/.bashrc

After that, you should be able to run node and npm from any folder.

YOU ARE DONE! HAPPY CODING!

“Remote Work” does NOT mean Work from Home.

Manish Baral — Tue, 18 Jun 2024 09:29:39 +0000

It means Work from Anywhere.

Working from anywhere means exactly as it sounds: “working from anywhere”. Its refers to the ability to perform one’s job tasks from any location with internet access, rather than being confined to a traditional office environment. Whether that’s at home, in the office, or even in a third space like a coffee shop, it provides employees with the flexibility to choose where they accomplish their work.

Furthermore, working from anywhere fosters inclusion by removing geographical obstacles and giving chances for people who may not be able to access typical office settings owing to considerations such as geography, mobility difficulties, or family commitments.
However, it is vital to recognize that working from anywhere presents its own set of obstacles, such as preserving work-life boundaries, overcoming feelings of isolation, and ensuring dependable internet access. Nonetheless, it signifies a substantial shift in our attitude to work, with an emphasis on outcomes and productivity rather than physical presence.

To me, “working from anywhere” signifies freedom, flexibility, and efficiency. It means being able to choose where I work based on my personal preferences and circumstances, whether it’s from home, a coffee shop, a co-working space, or while traveling. It also implies being able to balance work and personal life more effectively, as it often allows for greater control over one’s schedule.

Pros of working from anywhere:

Fexibility: Employees have the freedom to choose their work environment, which can lead to increased satisfaction and productivity.
Work-life balance: Working from anywhere allows individuals to better balance their personal and professional responsibilities, reducing stress and improving overall well-being.
Cost savings: Employees can save money on commuting expenses, work attire, and meals, while employers can reduce overhead costs associated with maintaining physical office spaces.
Access to a diverse talent pool: Employers can hire the best talent regardless of location, leading to a more diverse and skilled workforce.
Increased productivity: Many employees find that they are more productive when working from anywhere due to fewer distractions and the ability to create a customized work environment.

Like anything else in the world, the “work from anywhere” option has its pros and cons, which are listed below:

Cons of working from anywhere:

Communication challenges: Remote work can lead to communication difficulties as face-to-face interactions are limited, potentially resulting in miscommunication or feelings of isolation.
Lack of social interaction: Working remotely may lead to feelings of loneliness or isolation as employees miss out on the social aspects of the workplace.
Difficulty unplugging: Without a physical separation between work and home, some employees may struggle to disconnect from work, leading to burnout and decreased well-being.
Security risks: Remote work can pose security risks, as employees may access sensitive information from unsecured networks or devices, increasing the risk of data breaches.
Potential for blurred boundaries: Without clear boundaries between work and home life, some employees may find it challenging to maintain a healthy work-life balance, leading to stress and dissatisfaction.

Summary

Remote work encompasses more than just working from home. While it includes home-based work, it also extends to other locations, such as co-working spaces, coffee shops, or any place outside the traditional office. The key feature is the flexibility to choose where work is performed, allowing employees to tailor their environment to their needs and preferences. So, remote work is a broader concept that goes beyond the confines of a home office.

Redux Toolkit APIs

Manish Baral — Mon, 17 Jun 2024 17:49:59 +0000

Redux Toolkit is a package that provides a set of tools and utilities to simplify the process of working with Redux, a popular state management library for JavaScript applications. One of the key features of the Redux Toolkit is its built-in API, which includes several functions and utilities to streamline Redux development.

Here’s an overview of the Redux Toolkit API:

createSlice: This utility function allows you to define a Redux slice, which is a collection of reducer logic for managing a specific slice of the application state. It automatically generates action creators and action types based on the reducer logic you provide, reducing boilerplate code.
configureStore: This function is used to create a Redux store with sensible defaults, including support for the Redux DevTools Extension. It simplifies the process of setting up a Redux store by combining several configuration steps into a single function call.
createAsyncThunk: This utility function simplifies the process of handling asynchronous logic in Redux by creating action creators that automatically dispatch pending, fulfilled, and rejected actions based on the status of an asynchronous operation (e.g., fetching data from an API).
createEntityAdapter: This utility function generates a set of reducer functions and selectors for managing normalized entity states in Redux. It helps organize and manage data in a normalized format, making it easier to work with relational data structures in Redux.
createReducer: This utility function allows you to define a reducer function using a map of action type to reducer logic, similar to the approach used in createSlice. It's useful for cases where you need more flexibility in defining reducer logic outside of a slice.

Overall, the Redux Toolkit API aims to simplify common Redux use cases, reduce boilerplate code, and improve developer productivity by providing a set of ergonomic and opinionated tools for working with Redux.

How does it handle the Redux data overload issue?

Redux Toolkit doesn’t directly handle data overload issues, but it provides tools and patterns that can help mitigate them:

Normalized State Management: The Redux Toolkit encourages normalized state management using utilities like createEntityAdapter. Normalizing data structures can prevent data overload by organizing data in a structured way, making it easier to manage and update.
Selective Data Loading: With createAsyncThunk, you can implement selective data loading techniques, such as lazy loading or pagination, to load only the data that's needed at any given time. This can help reduce the amount of data stored in the Redux store and improve performance.
Memoization: Redux Toolkit doesn’t handle memoization directly, but you can use memoization libraries like Reselect in conjunction with Redux Toolkit to optimize selectors and prevent unnecessary re-renders caused by data overload.
Middleware and Throttling: Redux middleware can be used to implement throttling or debouncing techniques for actions that may trigger data overload. Throttling can help control the rate at which actions are dispatched, preventing excessive updates to the Redux store.
Selective State Slicing: Use selectors to retrieve only the necessary parts of the state tree rather than accessing the entire state object. This can help improve performance and reduce memory usage, especially when dealing with large amounts of data.

While Redux Toolkit provides useful tools and patterns for managing Redux state, it’s important to design your application’s state management strategy carefully to avoid data overload issues. This may involve a combination of normalization, selective data loading, memoization, and other performance optimization techniques tailored to your specific use case.

React controlled and uncontrolled hooks

Manish Baral — Mon, 17 Jun 2024 17:43:47 +0000

In React, controlled and uncontrolled components are patterns used to manage form inputs. React Hooks introduced the concepts of controlled and uncontrolled hooks to manage state within functional components. Here’s an overview:

Controlled Hooks:

useState Hook: With controlled hooks, state is managed directly by React. The useState hook allows you to declare state variables and update them using setter functions provided by React. When a component's state changes, React re-renders the component with the updated state.

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}

In this example, the input field’s value is controlled by the value state variable, and updates are handled by the setValue function.

Uncontrolled Hooks:

useRef Hook: Uncontrolled hooks allow you to manage state directly within the DOM rather than through React’s state management system. The useRef hook creates a mutable ref object whose current property can hold a value that persists across renders without causing a re-render.

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Value</button>
    </div>
  );
}

In this example, the input field’s value is managed directly by the DOM via the inputRef.current.value, and updates are accessed without involving React's state management system.

Choosing Between Controlled and Uncontrolled Hooks:

Controlled Hooks: Use controlled hooks when you need React to manage and synchronize the state of form inputs across your application. Controlled components provide a single source of truth for form data, making it easier to track and manage changes.
Uncontrolled Hooks: Use uncontrolled hooks when you need direct access to DOM elements or when dealing with large forms where controlled components might lead to performance issues. Uncontrolled components can be faster because they don’t trigger re-renders for every state change. However, they may be harder to track and manage, especially in complex applications.

Both controlled and uncontrolled hooks have their use cases, and the choice depends on your specific requirements and preferences.

Encryption for API: Make your api request secure

Manish Baral — Mon, 17 Jun 2024 08:16:16 +0000

HIPAA compliance requires stringent measures to protect sensitive health information, including encryption for API requests. Here’s a brief overview of how encryption can be implemented for API requests to ensure HIPAA compliance:

Transport Layer Security (TLS): Use HTTPS (HTTP Secure) for API communication. TLS encrypts data during transit between the client and the server, ensuring that data exchanged between them remains confidential and secure.
Encryption of Data at Rest: Ensure that any sensitive data stored on servers or databases is encrypted. This includes any data that the API might handle, such as patient records, medical history, or other health information.
Data Minimization: Only transmit the minimum necessary data over the API. This principle, known as data minimization, reduces the risk associated with transmitting sensitive information and helps to ensure compliance with HIPAA regulations.
Authentication and Authorization: Implement robust authentication and authorization mechanisms to control access to the API. This ensures that only authorized users or systems can access sensitive data.
Tokenization: Consider using tokenization for sensitive data. Tokenization replaces sensitive data with unique, randomly generated tokens, reducing the risk associated with storing and transmitting sensitive information.
Audit Trails: Implement comprehensive logging and auditing mechanisms to track access to sensitive data through the API. This helps in identifying any unauthorized access attempts or breaches and ensures compliance with HIPAA’s requirements for audit trails.
Regular Security Audits and Penetration Testing: Conduct regular security audits and penetration testing to identify and address any vulnerabilities in the API implementation. This proactive approach helps in maintaining the security and integrity of the API environment.
Vendor Compliance: If you’re using third-party services or vendors for API functionality, ensure that they also adhere to HIPAA compliance standards. This includes verifying that they have appropriate security measures in place to protect sensitive health information.

By implementing these measures, you can help ensure that API requests involving sensitive health information are encrypted and compliant with HIPAA regulations. However, it’s essential to consult with legal and security experts to ensure that your specific implementation meets all relevant regulatory requirements.
Let’s consider an example of how you can implement encryption for API requests in a React application while ensuring HIPAA compliance. For simplicity, let’s assume you’re using the fetch API for making HTTP requests and the crypto library for encryption.
First, you need to ensure that your React application communicates with the server over HTTPS. This ensures that data exchanged between the client and server is encrypted during transit. Most modern servers support HTTPS by default.
Here’s a basic example of how you can encrypt data before sending it in a React component:

import React, { useState } from 'react';
import crypto from 'crypto';

const API_URL = 'https://your-api-url.com';

const MyComponent = () => {
  const [data, setData] = useState('');
  const [encryptedData, setEncryptedData] = useState('');

  const encryptData = (data) => {
    // Replace 'YOUR_ENCRYPTION_KEY' with your actual encryption key
    const encryptionKey = 'YOUR_ENCRYPTION_KEY';
    const cipher = crypto.createCipher('aes-256-cbc', encryptionKey);
    let encrypted = cipher.update(data, 'utf8', 'hex');
    encrypted += cipher.final('hex');
    return encrypted;
  };

  const fetchData = async () => {
    try {
      const encrypted = encryptData(data);
      const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ encryptedData: encrypted }),
      });
      const responseData = await response.json();
      // Handle response data
    } catch (error) {
      console.error('Error fetching data:', error);
      // Handle error
    }
  };

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
        placeholder="Enter data"
      />
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

export default MyComponent;

In this example:

We import the crypto library to handle encryption.
The encryptData function encrypts the data using AES encryption with a provided encryption key.
The fetchData function is an asynchronous function that encrypts the data using encryptData and sends it to the server using a POST request to the specified API URL.
Replace 'YOUR_ENCRYPTION_KEY' with your actual encryption key.
Ensure that your server decrypts the encrypted data using the same encryption algorithm and key.

Remember, this is a simplified example. In a real-world scenario, you would need to handle error cases, manage encryption keys securely, and implement other security measures as per HIPAA compliance requirements. Additionally, consider using libraries like axios for more robust HTTP requests handling.