Dev Tips & Tricks for February

02/17/23

Loading Specific Node Versions on Vercel

I ran into an issue when the app I was deploying required Node v16 to build properly without errors. If I had more time I would have tried to figure out how to fix the errors caused with incompatible modules on Node v19.

However, I inherited this project and was just doing frontend updates.

The main issue was I wasn’t sure how to get my app host, Vercel, to use a specific version of Node.

NVM to the Rescue

Fortunately, when I rebuilt my mac I made sure I had my dev environment setup the way I wanted. One of those setup items was NVM, which is a node versioning CLI that allows you to easily install or switch to different Node versions when doing local development. You can learn more and get NVM install instructions on their github repository – https://github.com/nvm-sh/nvm

By adding a .nvmrc file I can set a default version of Node by adding this line:

.nvmrc

engine-strict=true

In package.json add the node version using engines property

“engines“: {
“node“: “>=16.0.0 <17.0.0“
}

Now I update my repository and when Vercel rebuilds the app, it builds it with Node v1 6. Everything builds correctly and the day is saved!

CSS Transform
Transforming the Shape of a box or card item.

(Note: if you have text inside the box, you need to do the exact opposite skew amount to get the text to be perfect again.)

				
					//use transform to skew an item
.box {
  transform: skew(14deg, 360deg);
 }
// transform text back
// 360 - 14 = 346deg
.box p {
transform: skew(346deg, 360deg);
}