DEV Community: Rakshit Nayak

How to Install NVM on macOS

Rakshit Nayak — Wed, 25 Jun 2025 01:41:37 +0000

Setting Up NVM on macOS (One-Time Setup)

If you're a developer working with Node.js, managing multiple versions of Node across different projects can get messy. That's where NVM (Node Version Manager) comes in a handy tool that lets you easily install, switch, and manage multiple versions of Node.js.

In this guide, we’ll walk you through a one-time setup of NVM on your macOS system.

Step 1: Open Your Terminal

By default, macOS uses the Zsh shell, so we’ll work with that.

Open the Terminal app. You can find it via Spotlight (Cmd + Space, then type Terminal).

Step 2: Go to Your Home Directory

Make sure you're in your user’s home directory:

List all files (including hidden ones) to check if .zshrc already exists:

ls -a

Step 3: Create .zshrc If It Doesn’t Exist

touch .zshrc

This file is where you'll store shell configurations, including NVM-related settings.

Step 4: Install NVM

Use the official installation script from the NVM GitHub repository:
https://github.com/nvm-sh/nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Step 5: Apply the Configuration

Once installed, you need to reload your shell configuration so NVM is available in the terminal:

source ~/.zshrc

To confirm everything went smoothly, run:

nvm --version

How to implement Server Side Rendering for Material UI's media queries in NextJs to avoid flash?

Rakshit Nayak — Sat, 29 Oct 2022 18:02:04 +0000

What is this post about?

This post will help you to implement server side rendering(SSR) for Material UI's media queries if you are using NextJs with MUI(formerly Material-UI). If you implement useMediaQuery using SSR you will avoid the flash of desktop view in the mobile width devices during initial second of the render when you load a page. This post will explain each step to you to make it much more clear.

Why do you see the flash of desktop view during initial render in mobile ?

Since useMediaQuery Defaults to false. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. If your code contains lines something like below then majorly you will see the flash

const xs = useMediaQuery(theme.breakpoints.down('sm'))
...
return(
  {xs ?
     <p>Small device</p>
  :
     <p>Regular size device</p>
  }
)

More context of flash

If you load the page in mobile, initial second during render will return "Regular size device" and then to "small device" but the case it should render is "Small device" during initial render itself.
This happens due to not using correct method of useMediaQuery during ssR

Here is the useMediaquery mui documentation but its really confusing how to implement in your code, so below are the steps

Step 1: Get device type from server side App.getInitialProps

I assume your _app.js looks like below,

// _app.js
import NextApp from 'next/app';
import { createTheme } from '@mui/material';


const App = ({ Component, pageProps }) => {

  const theme = createTheme({
    // your MUI theme configuration goes here
    components: {
      //your default component styling goes here
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  ); 
};

App.getInitialProps = async (context) => {
  return {
    ...NextApp.getInitialProps(context),
  };
};

export default App;

Edit App.getInitialProps to get deviceType, for this you require ua-parser-js. install this package and Parse the user agent string of the client to extract device type

App.getInitialProps = async (context) => {
  let deviceType;

  if (context.ctx.req) {
    deviceType = parser(context.ctx.req.headers['user-agent']).device.type || 'desktop';
  }

  return {
    ...NextApp.getInitialProps(context),
    deviceType,
  };
};

Step 2: Provide an implementation of ssr matchMedia

Pass deviceType as prop and the following code in the function
The recommended way for emulating match media is Using css-mediaquery

const App = ({ Component, pageProps, deviceType }) => {
  const ssrMatchMedia = (query) => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: deviceType === 'mobile' ? '0px' : '1024px',
    }),
  });
 ........

Step 3: Override MuiUseMediaQuery default props in theme

The useMediaQuery is set to false as default. In order to detect the device width in server side you need to change the default props as the ssrMatchMedia defined above.So Add a following lines of code

  const theme = createTheme({
    // your MUI theme configuration goes here
    components: {
      MuiUseMediaQuery: {
        defaultProps: {
          ssrMatchMedia,
        },
      },
    }

This will set the deviceType during server side rendering and apply the mediaQuery before loading the page.

so final code looks something like below and you can use useMediaQuery in any component to avoid the flash

// _app.js
import NextApp from 'next/app';
import parser from 'ua-parser-js';
import mediaQuery from 'css-mediaquery';

import { createTheme } from '@mui/material';


const App = ({ Component, pageProps, deviceType }) => {
  const ssrMatchMedia = (query) => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: deviceType === 'mobile' ? '0px' : '1024px',
    }),
  });

  const theme = createTheme({
    // your MUI theme configuration goes here
    components: {
      MuiUseMediaQuery: {
        defaultProps: {
          ssrMatchMedia,
        },
      },
    }
  });


  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  ); 
};

App.getInitialProps = async (context) => {
  let deviceType;

  if (context.ctx.req) {
    deviceType = parser(context.ctx.req.headers['user-agent']).device.type || 'desktop';
  }

  return {
    ...NextApp.getInitialProps(context),
    deviceType,
  };
};

export default App;

Conclusion

If you follow the above steps you will avoid the flash and the case explained in context of flash works smooth.

That's it guys thank you :)

Understanding GCP in short

Rakshit Nayak — Mon, 08 Nov 2021 14:56:36 +0000

Google Cloud (also known as Google Cloud Platform or GCP) is a provider of computing resources for developing, deploying, and operating applications on the Web.

GCP is mainly a service for building and maintaining original applications, which may then be published via the Web from its hyperscale data center facilities

When you run a Web site, an application, or a service on GCP, Google keeps track of all of the resources it uses specifically, how much processing power, data storage, database queries, and network connectivity it consumes. you pay for each of these resources on a per-minute or even per-second basis, with discounts that apply when your services are used heavily by your customers on the Web.

Basic Google Cloud services

1. Google Compute Engine

Google Compute Engine is Google’s Infrastructure-as-a-Service virtual machine offering. It allows customers to use virtual machines in the cloud as server resources instead of acquiring and managing server hardware. Google Compute Engine offers virtual machines running in Google’s data centers connected to the worldwide fibre network. The tooling and workflow offered by compute engine enable scaling from single instances to global, load-balanced cloud computing.

2. Google Cloud Storage

GCP's Cloud Storage (GCS) is an object storage system, which is to say, its records maintain both the identity and the structure of any class of data given to it. Unlike a typical storage volume's file system, where each file or document is rendered as a string of digits whose location is registered in a file allocation table, object storage is an all-purpose block that's leased to consumers like space in a park-and-lock. It can hold entire organized databases, raw video streams, or matrices for machine learning models.

3. Google Big Data

Big data systems store and process massive amounts of data. It is natural to host a big data infrastructure in the cloud, because it provides unlimited data storage and easy options for highly parallelized big data processing and analysis.
The Google Cloud Platform provides multiple services that support big data storage and analysis. Possibly the most important is BigQuery, a high performance SQL-compatible engine that can perform analysis on very large data volumes in seconds. GCP provides several other services, including Dataflow, Dataproc and Data Fusion, to help you create a complete cloud-based big data infrastructure.

4. Google Cloud AI

Cloud AI offers various services that are needed to add Artificial Intelligence to our applications. Cloud-based machine learning, Cloud Vision API, and Cloud Speech API are some of these services.

There are more services that GCP provides click the below link to know more about Google Cloud Platform

DOM (Document object model) in less than 500 words!

Rakshit Nayak — Sun, 17 Oct 2021 17:28:38 +0000

Hello 🙋‍♂️,in this article we will talk about DOM in less than 500 words

DOM(Document Object Model) is a software interface for HTML, XML and SVG documents. It provides a structured view of the document(tree) as a group of nodes and objects that have properties and methods, and defines the way in which the structure can be accessed by the program.
DOM binds web pages to scripts or programming languages.

The basis of an HTML document is tags.
According to the DOM, an HTML tag is an object and nested tags are its "children".
All objects are available with JavaScript, we can use them to modify the page.
For example, document.body is an object for the <body> tag.

DOM EXAMPLE

And this is a view of an HTML document as a tag tree:

Tags are node elements(elements). They form the structure of the tree: <html> is the root node, <head> and <body> its child nodes, etc.

Text inside the elements forms text nodes named #text. The text node contains only a string of text. It cannot have descendants (it is always at the lowest level).
Spaces and line breaks are also symbols. Like letters and numbers, they form text nodes and become part of the DOM tree.

Here you can see Dom in real time