DEV Community: Alexis Guzman

How to install Node js on Linux

Alexis Guzman — Wed, 03 Nov 2021 22:41:18 +0000

When we start using Linux, one of the first doubts is how to install our favorite applications. As developers, we need several tools, one of the most common is Node.js and NPM. Let's see what is Node.js, NPM and how to install them in Linux.

What is Node JS?

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser. Node.js is a popular, lightweight web framework for beginners, and it is used by many big companies like Netflix and Uber.

What is NPM?

NPM is the default package manager for Node.js projects. NPM includes a command-line tool (CLI) that give you access to the NPM package registry. The registry stores the numerous JavaScript packages made available through the NPM CLI, along with their metadata. The NPM website gives you an easy way to search for JavaScript packages and read information about them. The package.json file that is generated by the NPM CLI helps you manage project dependencies. It also ensures consistent project installations across environments.

There are several ways to install Node.js, but probably the most popular is using Node Version Manager (NVM).

What is NVM?

NVM allows you to quickly install and use different versions of Node via the command line. Is a version manager for Node.js, designed to be installed per-user, and invoked per-shell. NVM works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash).

Install

You can install NVM using cURL or Wget, you only need to execute one of the two commands in your terminal:

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

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

To verify that it is installed correctly just type nvm -v and it should return the latest version of NVM, for example 0.38.0. To upgrade NVM, just run the same command.

There are some times that when we finish installing NVM, we run nvm -v, and instead of getting something like 0.38.0 we get nvm: command not found. But it is not the end of the world, in these cases it is necessary to close our terminal, open a new one and try nvm -v again.

Usage

To install the latest version of Node.js, do this:

nvm install node # "node" is an alias for the latest version

To install a specific version of Node.js:

nvm install 14.7.0 # or 16.3.0, 12.22.1, etc

To install the long-term support (LTS) of Node.js (the one I recommend):

nvm install --lts

Now just verify that Node.js and NPM are installed correctly, just run:

node -v # should return v16.13.0, v14.17.5, etc

npm -v # should return 8.1.2, 8.1.0, etc

And that's it! We already have Node.js and NPM in our Linux in a quick and easy way.
For more information check the NVM repository, there is more advanced information, frequent problems, and also where you can report a bug.

If you know other/better way please leave below in the comments. Share this post to whoever you think will help. I'll see you later.

Build React and Next applications most fast and efficiently

Alexis Guzman — Thu, 13 May 2021 21:49:48 +0000

Hello, world. Usually, developers spent a lot of time installing dependencies, creating folders, etc, before having our initial configuration and start working on the application.

The goal of ReexJs CLI is that we can start working on our application without worrying about the initial configuration.

With ReexJs we can:

Create a react.js or next.js app.
Create folders with a list of predefined lists and add custom folders.
Create routes if your choose react or pages for next.
Install normal dependencies and dev dependencies.

Requirements

Node Js
An active internet connection for CLI to work.

How it works

ReexJs use npx create-react-app <appname> or npx create-next-app <appname> and spawn from child_process to run one of the two commands.

To create the folders use mkdirSync from fs, and depending on if you previously choose react.js or next.js folders will be created in different paths, for react.js these will be created in src/, and for next.js folder will be created in the root path /.

Finally to install the dependencies spawn is also used when installing the framework. npm i <dependencies> for normal dependencies and npm i -D <devDependencies>.

How to use it

Install ReexJs
- Npm: npx reexjs-cli
- Yarn: yarn reexjs-cli
Choose the app name. By default is reexjs-app.
Choose the framework between react.js and next.js.
Select predefined folders and add custom folders.
Write your normal dependencies and dev dependencies.
Finally change the directory and run npm start or npm run dev.

Conclusion

ReexJs can save us time and start working on our application without worrying about the initial configuration.

So take a ☕ and relax.

Thank you for reading 🙏
If you enjoyed this article or found it helpful, give it a thumbs-up 👍, and if you have an idea to improve the application or any type of suggestion please leave it below in the comments 💬.

Feel free to connect 👋

How to uppercase the first letter of a string in JavaScript

Alexis Guzman — Fri, 07 May 2021 22:50:24 +0000

JavaScript offers many ways to capitalize a string to make the first character uppercase. Learn the various ways, and also find out which one you should use, using plain JavaScript.

1. chartAt + slice

The first way to do this is through a combination of cartAt() and slice(). With chartAt() uppercases the first letter, and with slice() slices the string and returns it starting from the second character:

const name = 'codax';
const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1);
// expected output: "Codax"

You can create a function to do that:

const capitalize = (s) => {
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize('codax'); // "Codax"

2. Replace function

My favorite is with replace() because I love regex (even if I'm not an expert) and regex is more customizable in general.

const name = 'codax';
const nameCapitalized = name.replace(/^\w/, (c) => c.toUpperCase()));
// expected output: "Codax"

You can also make it a function:

const capitalize = (s) =>
  return s.replace(/^\w/, (c) => c.toUpperCase()));
}

capitalize('codax'); // "Codax"

Conclusion

For readability, I recommend the first option (chartAt + slice), and for speed, I recommend the second option (replace).
If you know other/better ways please leave below in the comments, or how to improve on the ones mentioned here.
Thanks.

How to center elements with CSS

Alexis Guzman — Thu, 28 Jan 2021 21:38:30 +0000

Knowing how to center things with css is very necessary for our day to day as web developers. There are several ways to achieve the same, so it can get us confused. Today we are going to learn how to center things horizontally, vertically and both (horizontally and vertically) fully responsive.

We will work with two divs, one as a parent element and the other as a child.

<div class="parent">
    <div class="child"></div>
</div>

1. Horizontally

Center an element display: block; requires a fixed width, since it takes all the available width or, failing that, transform it to display: inline-block;

Method margin-auto:
Giving it automatic margin from left to right, it automatically centers the element horizontally and is fully responsive.

.child {
    margin: 0 auto;
}

Using Flexbox:
Flexbox is a more useful feature within css. We use it a lot for the layout. We can use justify-content in the parent element to achieve our goal. And it is also responsive. (Remember that by default flex-direction is row so all child elements will be placed in a horizontal row, if you want them to be placed vertically use flex-direction: column;)

.parent {
    display: flex;
    justify-content: center;
}

2. Vertically

Centering items vertically is confusing, so let's see how to get it right.

Using Flexbox(again):
Now instead of using justify-content we will use align-items.

.parent {
    display: flex;
    align-items: center;
}

3. Both(horizontally and vertically)

Centering elements both horizontally and vertically is very satisfying. We almost always have a situation where we want to center things so let's see 2 ways to do it.

With Flexbox(yes again):
As we've seen, flexbox helps us to center things both horizontally and vertically, so what if we put justify-content and align-items together?

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

Using Grid:
This is the last method of the post and the fastest. It is my favorite, we can center the elements with only 2 lines of code!

.parent {
    display: grid;
    place-items: center;
}

Conclusion

There are many ways to achieve the same, such as using position, playing with padding and margin. Although it generally depends on the situation which method we will use. I recommend learning Flexbox and Grid as it helps us in various ways, reducing our lines of code. Share this post to whoever you think will help.