DEV Community: Matheus Alves

How to Install MongoDB with OpenSSL 3 Support on Fedora 39

Matheus Alves — Mon, 03 Jun 2024 18:14:52 +0000

If you're still having troubles running MongoDB + OpenSSL3 on Fedora, learn how to install it properly by checking my first article as a freeCodeCamp Publication Contributor: How to Install MongoDB with OpenSSL 3 Support on Fedora 39

Three Sentences That Changed My Way of Approaching Web Development.

Matheus Alves — Mon, 04 Dec 2023 15:17:42 +0000

Web development is not an easy thing and sometimes it can be daunting, even to the point we start to question ourselves with questions like this: "Is it really for me?"

But I believe that you're probably a capable person who is struggling because you're approaching it the wrong way. Hence, here are a few sentences that helped (and still help) me to become a better developer:

Note: The wisdom they provide can be applied to development in general and even to your life. So, let it settle in your mind!

Number #1

"Trust the process."
― Natalie Sideserf

Programming is a process, and a process can be understood as a series of steps that must be taken toward a goal. They cannot be skipped, and trying to do that will probably cause lots of headaches.

For instance, you may skip one step because it demands a prerequisite knowledge you deem you have but you know you don't. Then, you end up wasting time because, instead of implementing the right solution (not the perfect, a good solution) from the beginning, you keep guessing and trying and finding that most attempts were a failure and, when you come up with something that works, it is a subpar solution.

Therefore, understand and trust process.

Natalie Sideserf makes hyper-realistic cakes and she said that when she was talking about how sometimes she felt she would not be able to bring to life one of her cake ideas, but then she remembered that, if she followed the process she learned, she would be able to achieve the desired result.

Number #2

"Before starting, stay calm and slow down, don't just jump at a problem without a plan. Also, take a very logical and rational approach."
— Jonas Schmedtmann

This is something I have to remember constantly, at least up until now. I have to confess that I'm inclined to get anxious when I have to deal with a complex project.

However, since I started training myself to stay calm, to plan and to break big complex tasks into smaller simpler ones I noticed great improvements.

Yes, you read it right. This is something that requires training. You won't be able to change the way you approach things overnight. As soon as you note you're approaching a problem the wrong way stop and follow these tips.

Jonas Schmedtmann describes himself as a

"[...] full-stack web developer and designer with a passion for building beautiful web interfaces from scratch."

Besides he's been designing and coding for more than a decade. He also has a Master's degree in Engineering.

With seven courses and almost two million students just on Udemy, I'm sure he applies these tips to his life.

Number #3

"The master has failed more times than the beginner has even tried."
— Stephen McCranie

A few years ago I was trying to learn Java and found some free courses on the web. I got enrolled in a Udemy course that I believed was offered by Google. In one of the videos one of the instructors cited this phrase.

It stuck with me for a simple reason: I'm a perfectionist. Besides, I don't know when, but several years ago I came to believe that the student must surpass his teacher.

This is a good thing. But it can become a terrible mindset where you can't get things done because you can't make them perfect. The truth is: there's no perfection in this world. And that's a good thing if you think about it.

Therefore, remember that the path to success is full of failures. Learn with them, don't let them let you down. Learn to fail smart. By doing these things you'll become a master!

Note: I'm not sure this is the author of this sentence. Stephen McCranie is the result of a Google search. The problem is that some results indicate he's a cartoonist and others an author. Because of that, I can't provide any detailed information about him.

I hope these sentences help you too. See you in the next post!

Cover image by Nick Youngson CC BY-SA 3.0 Pix4free

How are HTML elements stacked by default?

Matheus Alves — Tue, 15 Aug 2023 18:21:27 +0000

In today's article you'll to learn how HTML elements are stacked by default. Therefore, I'll NOT teach you how to change the stacking order of elements (you may use the z-index CSS property for this purpose) but only teach you how things work "naturally".

I believe understanding how element stacking works by default will make it easier for you to learn how to control it, which I'll cover in a future article.

Important terms
The default stacking order
Demo
Summary
Conclusion

Important terms

z-axis: You may recall from highschool math classes the 3D coordinate system, which is formed by the x, y and z axes. In this system, if you combine two axes you create a two-dimensional plane. The remaining axis will always be perpendicular to the plane and form with it the 3D coordinate system. Consider de image below
3D coordinate system
You can think of the xy plane (the blue layer) as the screen you're looking at right now. Since you're facing the screen (you're perpendicular to the screen) you're on the z axis.

Although the image only shows one layer on the xy plane, the plane can contain an infinite number of overlapping layers. The overlapping can be total or partial.
Stacking: Considering the system described above in the context of a web page, stacking is the total or partial superposition of elements. The higher in the stack, the closer to the user facing the screen.
Root element: The <html> element, which is the top-level element of any HTML document, is also known as the root element.
Positioned element:

A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)
Descendant element: A descendant element is an element that is nested within another element, regardless of how deeply nested.
Descendant non-positioned element: An element that is a descendant of the root element and that has NOT been positioned.
Descendant positioned element: An element that is a descendant of the root element and that has been positioned.

Note: Keep in mind that the <html> element is a container for the <head> and the <body> elements. The former is NOT visible to the user and contains metadata about your page, for instance, it links your page to external style sheets. The latter is a container for the visible portion of your page. Therefore, the descendants of the <html> element that matters to us are the one inside the <body> element.

The default stacking order

Once you understand the terms described above, understanding the default stacking order is pretty straight forward:

At the very bottom of the stack goes the <html> element.
Then, its non-positioned descendant elements, in order of appearance in the source code.
And finally, its positioned descendant elements, in order of appearance in the source code.

Demo

This is the <body> of the page:

<body>
  <div class="static1">Static #1</div>
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="fixed">Fixed</div>
  <div class="sticky">Sticky</div>
  <div class="static2">Static #2</div>
</body>

You can see from the demo and from the snippet above that both static elements go below the positioned elements when they overlap, even though Static #2 comes last in the source code. This proves that in this imaginary z-axis positioned elements are closer the user than non-positioned elements.

The way the positioned elements overlap proves that they are stacked in order of appearance.

What about the root element?

⚠️ the next paragraph might blow your mind 🤯

I haven't set any styles to it, which makes it keep its transparent background-color. The white background you see comes from the light your device's screen emits. Don't believe me? See the Formal definition for the background-color.

If you set a different background-color to the root element you'll confirm that it is below its descendant elements.

Summary

The first thing to consider is that, when we talk about stacking, we're talking about a tridimensional conceptualization of HTML pages. Elements are stacked on the z-axis, which is an imaginary axis perpendicular to the screen.

Second, in order to understand how elements are stacked by default, i.e., without the z-index property, we need to make a distinction between three types of elements:

The root element (the <html> element) which is a container for every other element you add to your page.
Non-positioned elements, which have their computed position value equals to static.
Positioned elements, which have their computed position value equals to anything but static.

Third, stacking will only be observable in cases of overlapping between elements.

Fourth, you may not have noticed, but there's no distinction between the different types of positioned elements. By that I mean that absolutely positioned elements do not have precedence over relatively positioned elements or vice-versa, for example. They have the same "weight" and the one that comes later on the source code will be on top.

Conclusion

Once you understand what stacking means in the context of web pages and the different types of elements that can be stacked, understanding the default stacking order becomes crystal clear.

From a philosophical perspective, when you compare the Important terms section with the The default stacking order section you can see that learning why may be more difficult, but it will make learning the how easier.

Finally, this article does NOT deal with the stacking of nested elements of a stacked element, nor with how to alter the stacking order, but I promise I'll cover that in a future article 🫡

This project's source code is available at this repo. Go ahead and give it a star!

Did you like this article? Share it with your friends, or leave a comment, or a reaction. Of course, there's nothing stopping you from doing everything 😄

If you're on HackerNoon, don't forget to subscribe if you want to get my latest articles straight to your inbox.

Set Up Webpack 5 To Work With Static Files

Matheus Alves — Tue, 01 Aug 2023 22:50:55 +0000

Set Up Webpack 5 To Work With Static Files

Out of the box webpack only understands JavaScript. However, we can expand its functionality by using loaders and plugins. In this tutorial, you’ll learn how to work with static files, namely, HTML, CSS, and some common image types.

Why do we need to to that?
Important terms
Understanding the project structure
Understanding the overall setup
Working with HTML
- Configuring the html-loader
- Configuring the html-webpack-plugin
Working with CSS
- Configuring the css-loader and the style-loader
Working with images
- Using Asset Modules
Final touches
Summary
Conclusion

Why do we need to to that?

If you read the intro of this article with attention, you already know the answer: It’s because without any further configuration webpack only understands JavaScript. Therefore, we need to use loaders and plugins that allow webpack process and bundle other types of files.

Important terms

I decided to provide not only a definition but also an explanation for the necessity of the loaders and plugin we’re going to use. Feel free to skip this section if you have confidence you understand the terms listed bellow.

Note: I’m not following the alphabetical order on purpose. You’ll understand why 😉

Assets: At the home page of webpack, you can see that assets, scripts, images and styles are treated as different things. Nevertheless, at the glossary of the website we read that an

asset is a general term for the images, fonts, media, and any other kind of files that are typically used in websites and other applications.

So you can see that in the glossary an image is an asset. I prefer to define assets as the resources we use as they are, for example, images, fonts, audio and video. In other words, we don’t code them ourselves, but we use them to build our project.
Note: We usually put configuration files (.gitignore, webpack.config.js, etc) in the root directory of the project while the files and assets that are used to build the project are put in a sub-directory called src (short for source) or app.

I prefer to think of the source as everything we have in our project. Thus, I prefer to call app the sub-directory that contains our files and assets.

Agree? Disagree? Let me know in the comments 🙂
Loaders:

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.

Putting it simple, loaders allow us to work with file types other than JavaScript.
Plugins: This is an advanced topic so let’s stick to the following simplified definition:

They also serve the purpose of doing anything else that a loader cannot do.
css-loader:

The css-loader interprets @import and url() like import/require() and will resolve them.

To work with CSS, we’ll have to import .css files into .js files. But, as CSS syntax is not valid JavaScript, we must set up the css-loader, which will interpret @import and url() (CSS syntax) import/require() (JavaScript syntax), and resolve them.

“Resolve” here simply means to identify the correct path to the specified file.

This loader must be used with the style-loader.
style-loader: The style-loader injects CSS into the DOM. While the css-loader makes webpack understand CSS, it’s this loader's job to apply the CSS to the page.
html-loader:

Exports HTML as string, require references to static resources.

What? 😕 Let me explain it to you 😉. The content of an HTML file is written using the Hyper*Text **Markup **Language (hence the name **HTML), which is a text-based approach for describing how the content is structured. For example, if you have an <h1>Heading level 1</h1> inside of your *.html** file, when a browser parses your file, it will know exactly how to display your heading, because the browser understands the contents of a .html file. If you have a <img src="/images/logo.png" alt="Logo" />, it will understand the src attribute and will locate and display the image.

I think you already know that we can manipulate the content of an HTML file using JavaScript. For instance, we can create elements, add/remove classes, etc. This is only possible because of the APIs that allow us to do that.

Even when using APIs, we cannot simply insert the content of an HTML file inside of a JavaScript file. But JavaScript understand strings. Therefore, the html-loader reads the contents of an .html file and returns it as an string that can be used by JavaScript.

JavaScript does not understand the HTML src attribute but it understands the JavaScript require() statement! That’s why references to static resources like src are translated into require() statements.

Having the HTML string and the requires, JavaScript can manipulate the DOM via APIs.

If you want to learn more about APIs, see Client-side web APIs.
html-webpack-plugin: To understand the importance of this plugin, we have to remember that in order to execute JavaScript in the browser,
a. we have to embed our scripts using <script> elements in an HTML or

b. link to external scripts (by using the src attribute of <script> elements) from the HTML file.

In other words, we need an HTML file as an entry point for executing our scripts (or bundles) in the browser!

This situation arises the following question: How can we work with an HTML file if webpack only understands JavaScript? I have two answers for this question, since there are two approaches that can be followed for handling this situation:

The first approach involves manually creating an .html file, adding the bundle(s) manually, and making a copy of this file at the build folder.

The second approach involves using the html-webpack-plugin and letting it do all the work for us.

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the head using script tags.

You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

In this tutorial, we’re going to use an HTML template. Therefore, we’ll have to combine this plugin with the html-loader.

Understanding the project structure

Project structure

In the root directory of the project (our repository) we have some configuration files and a sub-directory named app that contains the files and assets for building the app.

Here’s a brief description of the role each configuration file plays:

.gitignore ignores the node_modules directory and other files we don't want to commit.
.prettierrc instructs Prettier on how to format our code (OPTIONAL, for those who use Prettier).
package.json was automatically created by running npm init -y. It holds all sorts of information about our project: name, version, dependencies, development dependencies, etc.
webpack.config.js and webpack.parts.js will be used to compose the webpack configuration, a strategy I have learned with SurviveJS, at the Composing Configuration section of the book.

You should add this code to your index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="quote">
      <p class="quote__text">Knowledge is freedom</p>
      <img class="quote__img1" src="./assets/images/bookshelf.png" alt="A bookshelf illustration" width="1280" height="640" />
    </div>
  </body>
</html>

For now, the rest of the files are empty. As for the images, you can download them from the repository: https://github.com/matheus4lves/article-serve-static-files.

Note: The second image will be dynamically added later.

Understanding the overall setup

First, we need to install our basic development dependencies (devDependencies). Run the following command: npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge.

This is why we need these packages:

webpack is, guess what, webpack. This is the core package.
webpack-cli allows us to further config webpack via CLI (terminal/prompt) and from our scripts.
webpack-dev-server provides us with a local development server.
webpack-merge facilitates composing configuration by basically merging objects and concatenating arrays, returning an object after the operations.

webpack.config.js

const { merge } = require("webpack-merge");
const path = require("path");

const commonConfig = merge([
  {
    entry: ["./app/assets/scripts/index.js"],
    output: {
      path: path.resolve(\_\_dirname, "./build"),
      filename: "bundle.js",
    },
  },
]);

const configs = {
  development: merge([]),
  production: merge([]),
};

module.exports = (\_, argv) => merge([commonConfig, configs[argv.mode], { mode: argv.mode }]);

We start by splitting our configuration into three categories: common configuration, development configuration, and production configuration.

Instead of exporting an object from the module, we export a function which gives us access to the arguments we pass to the command line or to our scripts. We want to do that because we want to get the mode from an argument.

If we were to run the development server right now, we would have to run the following command from the CLI: npx webpack serve --config webpack.config.js --mode development. Instead, we’re going to set up two scripts that will help us develop and build our app.

Inside the scripts property of your package.json file, add these lines right after the test property:

"dev": "webpack serve --mode development",
"build": "webpack --mode production"

Now if we want to start the development server we can simple run: npm run dev. Much simpler, isn’t it?

For the time being we have the most basic configuration. We defined an array of entry points (because we can have more than one) and the output property which tells webpack the name of our bundle and the location it should be emitted to when we build the project.

Note that instead of exporting an object from the module we export a function, which gives us access to the argv object. This object contains the arguments that come from the CLI/scripts. Then, we access the mode property and create the configuration based on it.

Note: To keep things simple I'll not touch the development and production configurations.

Working with HTML

In this project we’re going to generate an .html file based on a .html template. We can also use other types of templates, for instance, EJS, handlebars, etc. We can, by the way, use no template at all, and generate our HTML based on plain JavaScript (As we will do later).

Since we’re generating an static file based on a static file, the basic difference between our .html template and the generated .html file is that the generated file contains an <script> tag with our bundle.

To be able to use an .html file as a template, we must make webpack understand HTML. To do so, we’ll set up the html-loader.

Then, we’ll set up the html-webpack-plugin so that it can generate the final .html for us.

Summarizing, we’ll read from an .html file to generate a .html file. Again, this is because we’re generating an static file based on a static file. In a more realistic situation, we would generate the .html file based on vanilla JavaScript (plain JavaScript) or based on a JavaScript library/templating language, thus generating static content based on dynamic content.

Configuring the html-loader

First, install the html-loader by running npm install --save-dev html-loader.

Then, add this function to wepback.parts.js:

exports.loadHTML = () => ({
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
});

This function returns an object literal that we have to merge to our configuration. Go to webpack.config.js and add this line:

const parts = require("./webpack.parts");

Now, add a call to loadHTML() as the second element of the array passed as the argument of the merge function that is creating the commonConfig:

const commonConfig = merge([
  {
    entry: ["./app/assets/scripts/index.js"],
    output: {
      path: path.resolve(\_\_dirname, "./build"),
      filename: "bundle.js",
    },
  },
  parts.loadHTML(),
]);

Webpack now understands HTML.

If you run the development server and visit the address your project is running at, you’ll be able to see the image even though we haven’t set up webpack to work with images yet. If you want to understand why read about the loader in the Important terms section of this article.

Configuring the html-webpack-plugin

First, install the plugin by running npm install --save-dev html-webpack-plugin.

Then, add this function to webpack.parts.js:

exports.generateHTML = ({ template } = {}) => ({
  plugins: [new HtmlWebpackPlugin({ template })],
});

And, at the top of the same file, don’t forget to require the plugin:

const HtmlWebpackPlugin = require("html-webpack-plugin");

Now, call this function right after the call to loadHTML() in webpack.config.js:

parts.generateHTML({ template: "./app/index.html" }),

Don’t forget to specify the template!

If you run npm run build now, you should see an index.html file inside the build directory.

Working with CSS

Two things are required in order to work with CSS:

We have to make webpack understand CSS.
We have to apply the CSS to the page.

For the first step we need to install and config the css-loader. For the second we need to do the same with the style-loader. Since there’s no point in making webpack understand CSS without applying the styles to the page, we’re going to set up these loaders together.

Configuring the css-loader and the style-loader

Let’s start by installing the required packages. Run: npm install --save-dev css-loader style-loader.

Then, add this to your** webpack.parts.js**:

exports.loadCSS = () => ({
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],Thanks 
      },
    ],
  },
});

Note: this order is important because webpack reads the loaders from right to left.

As with the other functions we’ve exported from this module, we have to call it from webpack.config.js. Therefore, add the following line right after the call to the generateHTML() function:

parts.loadCSS(),

To test the configuration, add this to styles.css:

body {
  background: #00ff00;
}

And this to index.js:

import "../styles/styles.css";

If you run the development server and visit the address the project is running at, you should see that the page has a green background.

Working with images

If we wanted to work with images in webpack prior to its fifth version, we would have to set up the file-loader, but webpack 5 introduced Asset Modules, which we’re going to use instead.

Using Asset Modules

According to the official webpack documentation,

Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.

To allow webpack load images that are dynamically added, add this function to webpack.config.js:

exports.loadImages = () => ({
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
});

Then, make a call to this function in webpack.config.js:

parts.loadImages(),

To test the configuration, let’s dynamically add the second image to our page:

Update the index.js to this:

import "../styles/styles.css";
import brokenHandcuffs from "../images/broken-handcuffs.png";

const img = document.createElement("img");
img.className = "quote__img2";
img.setAttribute("src", brokenHandcuffs);
img.setAttribute("alt", "Someone's upraised arms bound to the pieces of a handcuff that has just been broken.");
img.setAttribute("width", "817");
img.setAttribute("height", "460");

const imgContainer = document.querySelector(".quote");
imgContainer.appendChild(img);

Webpack will process this image, which means that the image will be added to the output directory (build, in our case) and the variable brokenHandcuffs will contain the final URL of the image after processing.

If you run npm run build, you’ll see the index.html file with the images in the build directory. Notice how the name of the images have changed (The final URL matches the name of the images).

If you run the development server, you should see both images on the page.

In the next section we’ll update the CSS to make the page a bit prettier.

Final touches

Update styles.css to this:

.quote {
  height: 100vh;
  position: relative;
}

.quote__text {
  color: #175f73;
  font-size: 20px;
  position: absolute;
  bottom: 380px;
  left: 50%;
  transform: translateX(-55%);
}

.quote__img1 {
  width: 700px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.quote__img2 {
  width: 400px;
  height: auto;
  position: absolute;
  bottom: 300px;
  left: 50%;
  transform: translateX(-50%);
}

You should get this result

Final version of the page

Summary

Here’s a list with the main points of this article:

By default webpack only understands JavaScript. Therefore, if we want to work with static files we need to expand its functionality through loaders and plugins.
If we want to work with HTML, we need to set up the html-loader and the html-webpack-plugin. The former makes webpack understand HTML and allows us to use a .html file as a template while the latter automatically generates an HTML5 that includes all our bundles in the head using <script> tags.
To work with CSS we need to make webpack understand it first by configuring the css-loader, and then tell webpack to apply our styles to our pages by configuring the style-loader.
Since webpack 5, if we want to work with images that are dynamically added we don’t need to set up additional loaders because webpack provides Asset Modules. We just need to set up the test condition and the proper type of resource.

Conclusion

Thanks to its rich ecosystem of loaders and plugins webpack became much more than a module bundler, allowing us to to things that would previously required a task manager and other tools.

If you want to expand webpack’s functionality, this is the basic workflow:

Install the loader or plugin you need.
Configure it.

I hope this tutorial is useful for you. Thanks for reading! You can find the source code of this project at this repo: https://github.com/matheus4lves/article-serve-static-files

What’s the Difference Between path.join() and path.resolve()?

Matheus Alves — Mon, 12 Jun 2023 02:55:05 +0000

How many times have you come across path.join() and path.resolve() in Node.js projects without really understanding the difference between them?

In my own experience, I’ve seen different projects with the same structure using one over the other and I couldn’t really understand why. After becoming aware of my lack of knowledge, I decided to investigate and share my learnings with you.

List of Important terms
Brief recap - how to change directories on terminal/prompt
What does path.join() do?
What does path.resolve() do?
The key difference
When should you choose one over the other?
Usage examples

List of Important Terms

I believe once you understand the terms listed below it will be easier for you to grasp the differences between the two methods.

String: A string is a sequence of characters that are interpreted literally (the exact way it has been written) by a script, e.g., "this is a string". They must be surrounded by quotation marks if there’s more than one word.
Path: A path is simply a string that identifies the location of a file or directory on a computer, e.g., "/home/user/Documents/file.ext" or "/home/user/Downloads/". I’m going to use the word ‘file’ here for referring to both files and directories.
Relative path: A relative path is a string that identifies the location of a file relative to the location of another file.

For instance, let’s assume some user has the following directory structure:
Directory structure example
If Downloads is the current working directory (CWD) and the user wants to access a file inside the Documents directory, he would have to navigate up one level, and then go down into the Documents directory. Something like this on POSIX-compliant systems (Linux, MacOS, etc.) cd ../Documents/file.ext or like this on Windows cd ..\Documents\file.ext.

Note: On the terminal or prompt we don’t need to surround the string with quotation marks if there are no spaces in the names of the files. Trying to execute cd ../Documents/my file.ext would result in an error message.
Absolute path: Simplifying, an absolute path is the string that identifies the location of a file relative to the root of the system. For example, instead of trying to access the file from the previous example via a relative path, the user could’ve specified an absolute path like this cd /home/user/Documents/file.ext. We can specify an absolute path from any location.
Path segment: A path segment is a slice of the path. For example, we have /home, /user and /Documents as segments of /home/user/Documents/file.ext.
__dirname: This is a Node.js environment variable that specifies the absolute path for the directory which contains the currently executing file.

For instance, if you have webpack.config.js:

console.log(__dirname)

The expected output on the console would be

/home/user/Documents/project

If the webpack.config.js is inside the project directory.

In other words, __dirname is simply the string of the absolute path to the file’s location.

Path normalization: As you saw, there are differences between the strings used to specify the path on different OSs. Windows uses \ while POSIX-compliant OSs use / as a directory separator, just for instance. Path normalization happens when the string is modified so that it conforms to a valid path on the target operating system. If you want to learn more about the steps required to perform path normalization, see https://learn.microsoft.com/en-us/dotnet/standard/io/file-path-formats.

Brief Recap - How to Change Directories on Terminal/Prompt

. and ./ represent the CWD;

.. and ../ represent the parent of the CWD;

/ represents the root directory

If you put cd in front of them, they’ll take you to the desired location.

I said it was going to be brief 😂

What does path.join() do?

The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

The syntax is quite simple: path.join(…paths), where …paths is a sequence of segments.

For example, calling path.join("path", "/to", "some", "file") returns the following string path/to/some/file in a POSIX-compliant system.

If you don’t understand what the … mean, take a look at Spread syntax (...).

What does path.resolve() do?

The path.resolve() method resolves a sequence of paths or path segments into an absolute path.

Almost identical syntax: path.resolve(…paths). This method processes the paths from right to left and when it finds a / treats it as the root of the system.

For example, calling path.resolve(__dirname, "/path") would return /path, because the second argument has a leading / and thus will be treated as the root of the system.

The key difference

path.join() simply concatenates segments and its return may or may not result in an absolute path. path.resolve() always returns an absolute path, using the target operating system’s root as the root or the first argument with a leading / as the new root.

When should you choose one over the other?

It depends. Does your tool require an absolute path? Then use path.resolve(). Do you only need to concatenate segments of paths? Use path.join().

In practice, I can’t remember seeing path.join() or path.resolve() being used without __dirname, which makes both methods result in an absolute path with the OS’s root being the root.

Again, calling path.resolve(__dirname, "/path") makes no sense since __dirname would be totally ignored because the second argument starts with a /. The following is a valid use case: path.resolve(__dirname, 'dist/assets').

Usage examples

Input:

console.log(path.join(__dirname, "path"));
console.log(path.join(__dirname, "/path"));
console.log(path.join(__dirname, "./path"));
console.log(path.join(__dirname, "../path"));

console.log(path.resolve(__dirname, "path"));
console.log(path.resolve(__dirname, "/path"));
console.log(path.resolve(__dirname, "./path"));
console.log(path.resolve(__dirname, "../path"));

Output:

// path.join()
/home/user/some/other/segments/path
/home/user/some/other/segments/path
/home/user/some/other/segments/path
/home/user/some/other/path

//path.resolve()
/home/user/some/other/segments/path
/path
/home/user/some/other/segments/path
/home/user/some/other/path

As you can see, if what you need is an absolute path to the current executing file, you can choose any of the following:

console.log(path.join(__dirname, "path"));
console.log(path.join(__dirname, "/path"));
console.log(path.join(__dirname, "./path"));
console.log(path.resolve(__dirname, "path"));
console.log(path.resolve(__dirname, "./path"));

I think that’s enough.

If you found this article useful, share it with your friends.

See you next time!

DEV Community: Matheus Alves

How to Install MongoDB with OpenSSL 3 Support on Fedora 39

Three Sentences That Changed My Way of Approaching Web Development.

Number #1

Number #2

Number #3

How are HTML elements stacked by default?

Table of contents

Important terms

The default stacking order

Demo

Summary

Conclusion

Set Up Webpack 5 To Work With Static Files

Set Up Webpack 5 To Work With Static Files

Table of contents

Why do we need to to that?

Important terms

Understanding the project structure

Understanding the overall setup

Working with HTML

Configuring the html-loader

Configuring the html-webpack-plugin

Working with CSS

Configuring the css-loader and the style-loader

Working with images

Using Asset Modules

Final touches

Summary

Conclusion

What’s the Difference Between path.join() and path.resolve()?

Table of Contents

List of Important Terms

Brief Recap - How to Change Directories on Terminal/Prompt

What does path.join() do?

What does path.resolve() do?

The key difference

When should you choose one over the other?

Usage examples