DEV Community: gursidak_singh

Mastering the Art of Pain-Free Remote Work: Your Ultimate Guide to Avoiding Neck and Back Pain in the IT Industry

gursidak_singh — Sun, 16 Jul 2023 10:40:05 +0000

Welcome to the comprehensive guide on how to prevent neck and back pains caused by remote work in the IT industry. As technology continues to revolutionize the way we work, more and more professionals find themselves spending long hours in front of screens, leading to increased risks of discomfort and musculoskeletal issues. In this blog, we will explore practical tips and expert advice to help you maintain a healthy posture, minimize strain, and achieve a pain-free remote work experience. Let's dive in!

1. Ergonomic Setup: Creating an Optimal Workstation

Invest in a supportive chair with adjustable features such as lumbar support and armrests. Ensure proper height adjustment to align your knees, hips, and elbows at 90-degree angles.
Position your monitor at eye level to avoid straining your neck. Use a monitor stand or stack of books if necessary.
Use an external keyboard and mouse for comfortable arm and wrist alignment. Place them at a height that allows your forearms to rest parallel to the floor.
Arrange your desk setup to promote good posture and reduce strain. Keep frequently used items within easy reach to minimize excessive reaching or twisting.

2. The Power of Posture: Maintaining a Healthy Alignment

Sit up straight with your back supported by the chair's backrest. Avoid slouching or hunching forward.
Keep your feet flat on the floor or use a footrest if they don't reach. This helps stabilize your lower body and reduces strain on your back.
Relax your shoulders and let them naturally fall downward. Avoid shrugging or tensing them up.
Take regular breaks to stretch and walk around. Set reminders to encourage movement and change positions throughout the day.

3. Stretching and Strengthening Exercises: Relieving Tension and Building Resilience

Incorporate stretching exercises into your daily routine to loosen tight muscles. Focus on neck, shoulder, and back stretches to alleviate tension.
Perform strengthening exercises to support your core muscles, which play a vital role in maintaining proper posture.
Explore yoga or Pilates routines specifically designed for desk workers. These exercises can improve flexibility, strengthen muscles, and promote relaxation.

4. Mindful Work Habits: Prioritizing Health and Well-being

Practice regular mindfulness and relaxation techniques to reduce stress and tension in your body. Deep breathing exercises can help release muscle tension and promote relaxation.
Avoid multitasking and focus on one task at a time. This allows you to maintain proper posture and minimize strain on your neck and back.
Optimize your work environment by adjusting lighting and minimizing glare on your screen. Position your desk and monitor to avoid reflections that strain your eyes.
Stay hydrated and maintain a balanced diet to support your overall well-being. Proper hydration helps keep your muscles and joints lubricated.

5. Technology Usage Awareness: Optimizing Your Digital Experience

Use software tools and apps that remind you to take breaks and maintain good posture. Set timers or use productivity apps that encourage regular movement.
Adjust your screen settings to reduce eye strain and minimize blue light exposure. Consider using a blue light filter or wearing blue light-blocking glasses.
Utilize a document holder to keep reference materials at eye level, reducing the need for constant neck movement.
Experiment with voice recognition software to reduce typing and mouse usage. This can alleviate strain on your wrists and fingers.

Conclusion:

In today's remote work landscape, taking proactive steps to prevent neck and back pains is crucial for IT professionals. By implementing ergonomic principles, maintaining good posture, incorporating stretching exercises, and practicing mindful work habits, you can significantly reduce the risk of discomfort and enhance your

Magic!, useEffect running twice 🤔

gursidak_singh — Sun, 12 Feb 2023 17:54:04 +0000

React's useEffect hook is an essential tool for managing side effects in your components. However, it's not uncommon to run into issues where the useEffect hook appears to be running twice in development mode, causing unexpected behavior in your application.

This issue occurs because React updates its components in a specific way during development mode. When a component re-renders, React first calls the component with the updated state and props, and then calls the useEffect hook with the same values. This ensures that the component and its effects are always in sync.

However, if you're not careful, this can lead to unexpected behavior. For example, consider the following code snippet:


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

const Example = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('The count is:', count);
  }, [count]);

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

In this example, we have a simple component that displays a count and increments it when a button is clicked. The useEffect hook logs the current count to the console whenever it changes.

If you run this code in development mode, you'll notice that the useEffect hook is called twice for each update: once with the old count and once with the new count. This is because React is first calling the component with the old values, and then calling the component and its effects with the updated values.

To avoid this issue, it's important to understand how React updates its components in development mode. You can also use the useDebugValue hook to display a custom label for your hook in the React DevTools, making it easier to distinguish between the initial render and subsequent re-renders.

Here's an updated example that uses useDebugValue:


import React, { useState, useEffect, useDebugValue } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  useDebugValue(count, count => `Count: ${count}`);

  useEffect(() => {
    console.log('The count is:', count);
  }, [count]);

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

With this change, you can see the custom label in the React DevTools and easily distinguish between the initial render and subsequent re-renders.

In conclusion, understanding why the useEffect hook may run twice in development mode is essential for avoiding unexpected behavior in your application. By using the useDebugValue hook, you can easily identify and debug issues related to double rendering in your application.

How Suspense works in React18

gursidak_singh — Fri, 01 Jul 2022 08:44:01 +0000

React is one of the trending and most popular client-side libraries for developing painless interactive UIs. Already it has its roots deep in the market, but obviously, the goal is to achieve the best UI experience but not better. So React comes up with another major feature in its Version 18 that makes the User Experience faster and more interactive, which can be termed as "Non-Blocking User Experience". The term itself defines its meaning enough. That there's something that's gonna remove all the obstacles that make it slow while loading and interacting with any react app.

So Let's Dig Deep into the underlying concept to understand well the working of these features that makes it lighting fast.

Majorly there are two ways to use React

Client-Side Rendered App
Server Side Rendered App

Let's Start our Discussion on Problems with These two, that react 18 solves

Client-Side Rendering

In the above image all the stages of providing a view to the user, when he requests a page on react app is shown

It can be seen clearly that after the user request a page, the very first step that is performed is to LoadJs, then it fetches the data required for the views, and finally, it renders the components by the process of hydration (the process of making webpage interactive by connecting each DOM components with its respective logic).
Now the problem here can be seen clearly that until the process of hydration is not completed the user sees a blank white screen, which is a very bad user experience, and if there is some component that has large bulky Js with it to compile and render view, It makes it weirder. Also in case of a slow internet connection, it takes a lot of time to load the script and render an interactive view and until the script is loaded what the user sees is a blank screen.

Now the question that arises in mind is that we already have a solution for this problem and that is to render pages from the server-side

So, Let's discuss that case as well

Server-Side Rendering

Now what will happen in server-side rendering is, It will not resolve the problem of large javascript bundle or script also not of low internet speed, but it acts as an additional layer of optimisation over a client-side rendered app by providing pre-rendered HTML/CSS pages that prevent the browser from showing the blank screen, although these pages are not interactive until the process of hydration is done. But still, a better user experience than Client-sider rendered web app.

A typical app uses server-side rendering works in this way.

When a browser receives a request for a page, On the server it fetches data for the entire web page, also on the server, all components are rendered as HTML/CSS. Now this HTML is sent to the browser and browser hence rendered in the browser.

Clearly, for large and heavy web apps server-side rendering is very useful, instead of rendering the blank page to the user, the browser shows HTML/CSS rendered page and till the time user is getting the HTML/CSS of the page browser hydrates it to make it interactive.

Now the problem of a blank page is solved to much extent, but not completely as server rendering renders an HTML/CSS-based view to the user but it's not interactive.
Consider the case you go to the browser and request "https://youtube.com" and you get a server-side rendered HTML/CSS but until the hydration of large bulky JS is not completed or consider you have a slow internet connection, the page will not become interactive till then, buttons will not be clicked, videos will not be played, and that will make it useless even its showing view to the user. We need javascript to make it interactive

Now, this is server-side rendering explained in four steps :

We fetch the data on the server for entire application
We Render the code into HTML for entire application
We Load the Js on the browser for entire application
We hydrate the components to make the app interactive, for entire application

Yes, we do every step for entire application and simultaneously in server-side rendering. At every stage whole application is processed at once(in one pass).

Let's understand it well with an example - Suppose we have an app that has the following components as shown in the image below

We have Navbar, Sidebar, Posts, and Comments components.
Now suppose we have component that has heavy Js and large expensive API requests for a large amount of data. We can say it's a troublemaker part of the application. Now, this component will make trouble at every stage, Also we can't skip this component as without posts component application will be useless.

The main problems can be

Problem 1 - Fetch Everything, before you can Show Anything
Now as discussed above in server-side rendering how server fetches data of all application and renders it into HTML pages and provide a browser to show it to the user, but code can't be sent for rendering until all the data is fetched and remember Posts component involved heavy and large API requests. Now it will put us back into the same situation where the user will see a blank page until pre-rendering is done and the browser receives a static view to render.
Problem 2 - Load Everything, before you can Hydrate anything
This means we need to load the JS of the entire application before we can hydrate anything. Now again Posts is the component with heavy Js

We can see every component has been Loaded except the component, which is still loading its Js.
Now again in pre-18 versions of reacting the app will wait for hydration until all the components have loaded their JS.
Problem 3 - Hydrate Everything, before you can Interact with anything
Again the user will not be able to interact with any component until the code gets hydrated, for example, if the user will click on the profile component it will not be opened as there is no event- listeners and logic attached to components(hydration not done yet, due to large javascript connected with Posts component, the whole process gets late).

Hence In all 3 problems discussed above, there is something very common that's making delays in each step. So here the react 18 comes into the picture with its amazing feature "Suspense", which solves this problem. Rather than each stage of needs to happen for all the apps in one pass at one time, suspense allows us to break our work into multiple parts.

As shown above, wrapping a component in suspense allows us to show another component (passed in fallback), until the actual component is loading and hence resolves the problem of carrying out each step in one pass and that too without facing any delay.
Now the react will keep processing that component in the background and shows another component for example a spinner as a placeholder for that component.

Hence the initial page render happens sooner, there is no blocking in any stage. The loader provides the user an indicator that something is here that is going to load soon, instead of a blank screen that makes a really bad user experience. Now once the posts are fetched, rendered, loaded, and hydrated they are rendered at that particular place

Now with this, all the above problems are resolved,

In the first step, there is no blocking in fetching data due to expensive API requests, once the data fetching of all components, other than those wrapped in is completed the code is sent for the next stage, and the data fetching for suspense components keep on happening asynchronously behind
Hence we need not Fetch Everything before you can Show Anything.

Now after rendering the code as HTML, sent to the browser for loading Js, now again if no bulky Js are blocking the loading stage send the code to the next stage without any delay.
Hence we need not Load Everything before you can Hydrate anything

In the last stage, all the other components get hydrated except the one with troublemaker behaviour, in place of it the placeholder component provided in the fallback property of suspense is loaded and hydrated. Now all the components are interactive and the user can interact with any components, instead of the fact that posts are still loading. For example, a user can click on a profile and open the profile page, though the posts are loading.
Hence we need not Hydrate Everything before you can Interact with anything

This is all about React 18. So let's make our apps lightning fast with the great new feature.

Pre-Rendering In NextJs

gursidak_singh — Tue, 22 Feb 2022 06:22:23 +0000

What pre-rendering actually means in layman language

Pre-rendering is nothing but process of generating HTML along with necessary data of the content of requested page by client in our application.

yeah, It might be confusing a bit let's understand it with an example

In the picture shown below, Two pictures showing the page source of a next and react app

didn't you get the difference?

yeah ! its the difference between the html content that both of these are showing, In the first picture, showing react page source shows a single empty div tag with id root

<body>
    <div id="root"></div>
</body>

while if look into the page source of next app running on another tab, we see the whole html code of view that is visible on browser

 <body>
  <div id="__next" data-reactroot="">
    <div class="Home_container__bCOhY">
      <main class="Home_main__nLjiQ">
        <h1 class="Home_title__T09hD">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
    ----------------------------- 
    some more html code here 
    -----------------------------
  </div>
</body>

Yes! this is what is the very basic stage from which we can start understanding the concept of pre-rendering

In react, the html for the page requested is not produced but, the client is provided with the javascript code which on compiling gives us the requested view and this process of initialising app components and rendering view is known as hydration

Where as in NextJs, instead of generating html after hydration, it is generated pre-handedly and what client receives is the view, although this view is raw html code only without any interactions code and these interactions(Js logical code) get added after the client perform hydration and hence the what user see in browser is complete interactive view.

As shown in this figure below

Let's Check it out using examples also

Image1 showing the data received in network tab on requesting index page in react app

Image2 showing the data received in network tab on requesting index page in NextJs app

As discussed above, we can clearly see the difference that makes a-lot of differences in working of both and hence on efficiency also.

Now the question is how this pre-rendering is useful to the end users ??

In react we need to wait for the javascript to be executed also for the data to be fetched from external API's and then finally our UI is rendered. But with pre-rendering the html is already generated, thus the wait time gets decreased significantly, resulting in more efficient and fast loading of requested pages/views.
Another most important concept in which NextJs benefits a-lot is SEO(Search Engine Optimization). Especially if your building an e-commerce web application or blogging website , SEO is of biggest concern.
With React App if Search Engine hits your page, it only sees a "div" tag with id equals to "root", how ever if it hits the pre-rendered page in which all the html source code is present which helps search engine in indexing that page in search results easily

React Component LifeCycle Stages

gursidak_singh — Wed, 19 Jan 2022 06:46:21 +0000

Hey Geeks,

One of the major parts while learning any language, framework or library is to understand the internal working of its code. Though All the methods and ways of doing things are given in the documentation. And When we are stuck we have the life-saving great tool Stack-overflow to put us back onto the right path.

Have you ever wondered, who answers your questions on Stack-overflow and how they know the answers to the errors that are created by us 🥸😳 !

So, Let's know the working lifecycle of a React Component, to Avoid the errors and bugs we make…

According to the React Docs of version 16.4 or above, We may classify the Lifecycle of a React Component into 4 main stages through which they pass, Which are as follows

MOUNT - The Very First Time when our page loads the components start mounting and we get our beautiful page layout. that stage is known as the mounting of a component. What internally happens is, as we request the webpage by entering the domain name (https://loadmypage.com), all the components get mounted on the DOM (i.e., is created and inserted into the DOM).
This phase comes onto the scene after the initialization phase is completed. In this phase, our component renders the first time.

UPDATE - Update, we can say is another mount(remounting), that happens whenever there is a change in either state or props of a component, which results in the re-mount of that component.
This is the major thing in react that makes it fast and a robust library. Only the component on which some change happens got updated in the real DOM, instead of constructing the whole DOM tree again on even a single change in any small component of the app.

UNMOUNT - As the word suggests, When a component is removed from DOM Tree, that phase is known as Unmounting.
For Example - When we log out of our account on some app, the navigation buttons got removed from the header, which can be achieved by Unmounting the component containing the Navbar(Navigation buttons)
This stage may seem like some basic or less important stage, but it's an as crucial stage as mounting. Like in Mount Stage, if a component fails to mount properly, the page may face bugs and errors, in the same way, there are some operations that a user may want to perform before or just after the component unmounts

Let’s Understand Well With an Example Why Unmount Stage needs to be handled carefully;
Here there are two components
Index.js - Containing the MouseHook Component, and a button to mount and unmount the MouseHook Component by toggling the value of mount state variable;

MouseHook - In this Component Event Listener is Added just after the component is mounted to listen to the mouse movements(x,y), using UseEffect Hook.

(Index Component Snapshot)

(MouseHook Component Snapshot)

Hope you got the bug that is there in this code...🧐🧐
Not???? Let's See through the console

Let's Consider Two Cases

When MouseHook Component is Mounted(Added and Present in Dom Tree).

Our MouseHook is Mounted and working Right!!

Let's See What Will happen as we click the button to unmount MouseHook Component

OOOOOOPS..... Error!
Why this happened is because we added an Event Listener when the component mounted, but we haven't removed that Event Listener before unmounting the component, which may cause a serious memory leak problem(same that is mentioned in the Error also).....

Hope now the importance of unmounting stage is more clear.

Let's Remove the Event Listener before unmounting it, to fix this bug

Cleanup function returned in useEffect to remove EventListner.

Let's See the Results now...

The Event Listener is removed before unmounting the component.

ERROR - This is another important stage whenever any component crashes, it needs to show suitable and proper error messages, with the help of suitable methods and functions, which may help users to understand and fix bugs. Moreover, the bugs/errors are the only ways through which one can learn🙃

And here we come to the finish line _________________________;

Next Blog - Different functions and Methods available to handle the components at different stages differently