How many times have you received an Invalid dom nesting error like the following one in React or Next.JS?

```javascript
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
```

![Warning: validateDOMNesting(...): <p> cannot appear as a descendent of <p> in react and nextjs](https://cdn.hashnode.com/res/hashnode/image/upload/v1686152165587/61abfb6c-d15e-41ab-8581-2635dc3d4c72.png align="center")

From the above error, it can be known that somewhere inside a &lt;p&gt; tag I have another &lt;p&gt; tag as its child and that's not allowed, so I'm getting the following error.

While the warning does provide a stack trace sometimes tracing down the element that is causing the error might give you a hard time. For example, let's look at the following error, while the error gives the element's trace where the error occurred, I wasn't able to find the error just from the stack trace because the project that I'm currently using was using \`html-react-parser\` library to parse HTML that was coming from the server.

The actual code that was giving me the error was:

```javascript
 <p className="render-html">{parse(htmlFromServer)}</p>
```

Now I didn't notice the above code as I was looking only for the following structure in my code.

```xml
<p>
    <p>...</p>
</p> 
```

But then something suddenly struck me, what if I use CSS to locate the element where the error is occurring, as I have the structure of the HTML given to me on the browser console.

So I copied the elements from stack trace and wrote the following line of CSS

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686152072456/6f834bc3-c328-4e8f-8364-00d9f57e0fa0.png align="center")

And Tadaa, the culprit has been caught 🔍🚨

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686152330781/424e0285-7ad8-4d32-a631-50867d4ca5b4.png align="center")

I finally noticed where the error was occurring and then noticed the above-given code snippet. And I then that the code rendering server html that contained a &lt;p&gt; tag, inside of a &lt;p&gt; tag so I changed that &lt;p&gt; tag to &lt;div&gt; and the problem is now fixed.

A quick way to debug invalid dom nesting warning in React

The default look of any terminal is pretty boring, it only provides a basic interface and that's how it may be supposed to be but we can always change it to our liking, right? In this blog post, I'm going to write about How we can change the theme of the Windows terminal.

This is what the default terminal looks like

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681571286295/88ecdb3d-0be0-4510-87f4-7ad9e21172ac.png align="center")

This is what we will make it look like in the end

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681652686470/44a21512-d8e2-4b6b-b58b-4acbe313de68.png align="center")

So you in?

We will be using [https://ohmyposh.dev/](https://ohmyposh.dev/) to customize our terminal, they have a pretty sweet doc for this process [https://ohmyposh.dev/docs/installation/windows](https://ohmyposh.dev/docs/installation/windows)

Let's get started:

### Install oh-my-posh

Run this command, to install OhMyPosh first,

```powershell
winget install JanDeDobbeleer.OhMyPosh -s winget
```

Then go ahead and close that terminal window and reopen it again, it's advised to do so, so that the PATH variable is reloaded as mentioned in [docs](https://ohmyposh.dev/docs/installation/windows).

Now after the successful installation of oh-my-posh, we need to configure PowerShell to use oh-my-posh by default. We need to edit the PowerShell profile script.

### Create a PowerShell profile file

I'm assuming this is your first time doing it so you don't have any PowerShell profile files already on your computer, to create a PowerShell profile we run the following command in PowerShell

```powershell
New-Item -Path $PROFILE -Type File -Force
```

### Open the PowerShell profile file

Then run the following command

```powershell
notepad $PROFILE
```

### Tell PowerShell to run oh-my-posh

This will open up the PowerShell profile file in Notepad. Assuming the file is empty we paste the following line

```powershell
oh-my-posh init pwsh | Invoke-Expression
```

After adding the above line save the file and close it. Then go back to the terminal window and run the following command

```powershell
. $PROFILE
```

This will reload the terminal and your terminal should change to something like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681572769769/01f3fce3-05c8-43be-a6c1-93eb5bdce87c.png align="center")

As you can see oh-my-posh is working now, and it's showing a default theme, but it looks kind of broken right? It's cause we are not using the proper font that supports the glyphs that are needed for the proper appearance of the theme.

### Adding fonts (nerd fonts)

So let's go ahead and install a proper font to use in our terminal, [oh-my-posh recommends nerd fonts](https://ohmyposh.dev/docs/installation/fonts). Since they recommend a font in their docs let's just go ahead with that and [download it here](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Meslo.zip), it should download a zip file, go ahead and unzip then install the fonts on your system.

Now to use the font in our terminal, go to the terminal window and hit `ctrl` + `shift` + `,` this shall open up `settings.json` file, now add `font.face` property under `defaults` in `profiles` after changing it, save and exit from the terminal as well as the text editor that opened the `settings.json` file.

```json
{
    "profiles":
    {
        "defaults":
        {
            "font":
            {
                "face": "MesloLGM NF"
            }
        }
    }
}
```

After reopening the PowerShell it looks like this now

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681574009089/a3e2555b-9ebd-42be-8c48-812b54add8df.png align="center")

Now we are pretty much done here, but we can customize the terminal to look even cooler, I'm talking about making the background of the terminal window blurry.

Click on the little top dropdown icon beside your tab and click on settings or directly use the shortcut `ctrl` + `,`. It will open up the settings tab.

Now click on `appearance` then look for the 'Use acrylic material in the tab row (requires relaunch)' option, and turn that option on. After turning it on, save the changes.

And again from the left-hand side menu select the Windows PowerShell option under Profiles, now scroll down till you find the option of appearances under additional settings, click on that option.

After that scroll, till you see the Transparency section where you will see the option that says Enable acrylic material, turn that option on and you will also see the background opacity slider, you can set that slider as you wish, I'm going to set it at 70, now after saving the changes and returning to the terminal window, this is what it looks like.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681652601176/0258efd7-1d30-4d13-834d-453998908b4a.png align="center")

Hope you like the new look of your terminal ;)

Upgrade the look of your Windows terminal

Hey guys, Today we are going to be making Pinterest's masonry grid layout of their home feed. We will be using Next.JS & tailwind CSS with Unsplash API for this project. 


First, let's have a look at what we're going to be building.

Here's what the home feed of Pinterest looks like


![Screenshot (87).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666693523805/ahAw4R1ez.png align="left")


Upon inspecting with Chrome Devtools, We can see that they have implemented the layout using translate and absolute position, etc. for their layout.


![Screenshot (88).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666696413437/S9-vU5CcF.png align="left")

But we are going to be implementing the same layout in a much simpler way, using Columns. Columns is a CSS shorthand for column count & column width property. I first saw this in the tailwind docs as class and later realized that it's a CSS property. So, what this property does is it helps in dividing an element into columns that you specify. Kinda like the columns in a newspaper article.

You can checkout the tailwind docs for columns [here.](https://tailwindcss.com/docs/columns)

Let's go ahead and get access to Unsplash API. Go to [Unsplash developer](https://unsplash.com/developers) , register your application & you will be able to get access & secret key for that project. 

Now let's use create-next-app to create a next.js application for us.


```
npx create-next-app pinterest-layout 
``` 

Let's install our dependencies for this project. First, Tailwind CSS.

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

After running the two commands, your root directory shall now have a ```tailwind.config.js``` file.

In that file remove all existing code & add the following snippet:
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

Now under  ```/styles/globals.css```. Remove all existing code & add the following snippet:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Now, Let's go to ```/pages/index.js``` now. We will remove all the existing code and add the following snippet:

```
import Head from "next/head"
const Home = () => {
  return <>
    <Head>
        <title>Pinterest</title>
    </Head>
  </>;
};

export default Home;
```

Now with this much done, we can start to set up our unsplash api, first create a ```.env.local``` file in your root directory.

Add in your access key provided in the Unsplash developer portal.

Now let's install the Unsplash library

```
npm i unsplash-js
``` 

After that let's initialize the instance to make request to unsplash api as said in their [docs](https://github.com/unsplash/unsplash-js#creating-an-instance).

We will be using getServerSideProps to make request from our server to the unsplash server & we will return the response as props to the page. 

```
import { createApi } from "unsplash-js";

export const getServerSideProps = async () => {
  const serverApi = createApi({
    accessKey: process.env.ACCESS_KEY,
  });

  const photos = await serverApi.photos.list({perPage: 30});
  return {
    props: {
      photos: photos.response.results,
    },
  };
};
```
Now if everything goes well till here, then we will get photos props in our page and we will be able to access it via props.

Now lets map over the photos prop.

```
const Home = ({ photos }) => {
  return (
    <>
      <Head>
        <title>Pinterest</title>
      </Head>
      <section>
             {photos.map((el) => (
                <div key={el.id}>
                  <img
                    src={el.urls.regular}
                    alt={el.description}
                    height={300}
                    width={200}
                  />
                </div>
              ))}     
      </section>
    </>
  );
};
```

Now after we map the images they should lay normally like this.

![75698813-8220-4572-b5a1-4fe3e9664176.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669132396974/1zL14gGhC.png align="left")

And after we add the class of columns to the containing section of whole images, we will use a 7 column layout for this one, and after changing the code to

```
<section className='columns-7 max-w-7xl mx-auto space-y-4'>
        {photos.map((el) => (
          <div key={el.id} className='rounded-md overflow-hidden'>
            <img
              src={el.urls.regular}
              alt={el.description}
              height={300}
              width={200}
            />
          </div>
        ))}
</section>
```
We will see the layout work like magic with no extra work, we get a beautiful layout 

![6b175b39-ddba-43dd-b4fe-950bf4ca51e7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669132504502/Y5vtCWN-k.png align="left")

All right that's it, that is how we can achieve Pinterest like layout in a simple way using CSS columns, in next.js with Tailwindcss.

If you read all the way, thanks for reading the whole blog.

Any comments would be much appreciated.

*About Me: My name is Sabin. I'm a full stack web developer and designer based in Pokhara, Nepal. I'm new to writing blogs and will continue to write hopefully 🤞. I focus primarily on the frontend with Next.js & React.js*




 

