<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sonu kumar</title>
    <description>The latest articles on DEV Community by Sonu kumar (@mesonu).</description>
    <link>https://dev.to/mesonu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F832353%2Fd563118b-04e4-4be0-98e8-6e9856a3cb8d.jpg</url>
      <title>DEV Community: Sonu kumar</title>
      <link>https://dev.to/mesonu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mesonu"/>
    <language>en</language>
    <item>
      <title>How to Install Cursor AI Editor on Linux, Ubuntu (2025 Update)</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Thu, 06 Feb 2025 08:48:05 +0000</pubDate>
      <link>https://dev.to/mesonu/how-to-install-cursor-ai-editor-on-linux-ubuntu-2025-update-3kji</link>
      <guid>https://dev.to/mesonu/how-to-install-cursor-ai-editor-on-linux-ubuntu-2025-update-3kji</guid>
      <description>&lt;p&gt;Cursor is a smart code editor designed for pair programming with AI. You can download it on Windows, Mac, and Linux. While it's easy to install on Mac, I found it a bit tricky on Ubuntu Linux. After some research, I figured it out! Here's a simple guide to help you install Cursor on Ubuntu Linux.&lt;/p&gt;

&lt;p&gt;The cursor lets you write code using instructions.&lt;br&gt;
Update entire classes or functions with a simple prompt, Intelligent, fast, and familiar, Cursor is the best way to code with AI.&lt;/p&gt;
&lt;h1&gt;
  
  
  &lt;strong&gt;Step-by-Step Installation Guide&lt;/strong&gt;
&lt;/h1&gt;
&lt;h2&gt;
  
  
  Step 1:
&lt;/h2&gt;

&lt;p&gt;Go to the Cursor website and click on the "Download" button.&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 2:
&lt;/h2&gt;

&lt;p&gt;Once downloaded, you'll find a file ending with .AppImage in your Downloads folder.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What's an AppImage? It's a universal software package for Linux that doesn't need traditional installation.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  Step 3:
&lt;/h2&gt;

&lt;p&gt;Before running the file, make it executable. Open your terminal, navigate to your Downloads folder, and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;chmod +x cursor-0.45.8-build-250201b44xw1x2k-x86_64.AppImage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Note: Replace cursor-0.45.8-build-250201b44xw1x2k-x86_64.AppImage with your file's name.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Step 4:
&lt;/h2&gt;

&lt;p&gt;If you see an error about libfuse.so.2, don't worry! This means you need FUSE to run the AppImage.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Install FUSE by running:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt-get install libfuse2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 6:
&lt;/h2&gt;

&lt;p&gt;Now, make the file executable again:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;chmod +x cursor-0.45.8-build-250201b44xw1x2k-x86_64.AppImage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 7: Run the AppImage file:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;./cursor-0.45.8-build-250201b44xw1x2k-x86_64.AppImage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7vtib0s4ylaa1jos5oaz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7vtib0s4ylaa1jos5oaz.png" alt="cursor editor" width="800" height="571"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Adding Cursor to Your Applications List
&lt;/h1&gt;

&lt;p&gt;To easily access Cursor, add it to your applications list:&lt;/p&gt;

&lt;p&gt;Move the AppImage to the /opt folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo mv cursor-0.45.8-build-250201b44xw1x2k-x86_64.AppImage /opt/cursor.appimage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After move your cursor file in &lt;code&gt;/opt&lt;/code&gt; dir you can see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd /opt
ls
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxop7w8h39hxutt28xubh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxop7w8h39hxutt28xubh.png" alt="cursor editor" width="727" height="72"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can also run from here with the same command like above we have run but this is not required because we have created the runnable from application but for knowledge and info I will share the details:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;./cursor.appimage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7vtib0s4ylaa1jos5oaz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7vtib0s4ylaa1jos5oaz.png" alt="open cursor editor" width="800" height="571"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create a desktop entry:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo nano /usr/share/applications/cursor.desktop
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Paste the following into the file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Desktop Entry]
Name=Cursor
Exec=/opt/cursor.appimage
Icon=/opt/cursor.png
Type=Application
Categories=Development;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Save the file by pressing Ctrl + X, then press Y, and Enter.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Step:
&lt;/h2&gt;

&lt;p&gt;Add an icon for Cursor. Place a cursor.png image in the /opt directory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuaywtwzwwbukyavz6tht.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuaywtwzwwbukyavz6tht.png" alt="open cursor editor from application lunch" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If the icon doesn't appear, try logging out and back in.&lt;/p&gt;

&lt;p&gt;That's it! Thanks for reading, and enjoy using Cursor! 😊&lt;/p&gt;

</description>
      <category>programming</category>
      <category>ai</category>
      <category>cursor</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Understanding Bubble Sort Algorithm: A Step-by-Step Guide</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Mon, 23 Dec 2024 05:11:00 +0000</pubDate>
      <link>https://dev.to/mesonu/understanding-bubble-sort-algorithm-a-step-by-step-guide-3eok</link>
      <guid>https://dev.to/mesonu/understanding-bubble-sort-algorithm-a-step-by-step-guide-3eok</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F754ng571t8qjm6net5k8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F754ng571t8qjm6net5k8.png" alt="bubble sort" width="388" height="291"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Image Source: &lt;a href="https://cdn-images-1.medium.com/v2/resize:fit:1600/1*7QsZkfrRGhAu5yxxeDdzsA.png" rel="noopener noreferrer"&gt;medium&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sorting is one of the most important parts of Data Structures and Algorithms. There are many types of sorting algorithms, and here is one of the easiest algorithms: Bubble sort.&lt;/p&gt;

&lt;p&gt;Sorting algorithms are fundamental in computer science, and Bubble Sort is one of the simplest and most intuitive sorting algorithms. This post will explore how Bubble Sort works, analyze its time complexity, and walk through a JavaScript implementation.&lt;/p&gt;

&lt;p&gt;In this series, I will share the complete Sorting Algorithm Data Structure and Algorithms using Javascript and start with Bubble Sort. If you like and want me to share the complete Sorting algorithm with an example, please like and follow me. It motivates me to create and prepare the content for you guys.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Bubble Sort?
&lt;/h2&gt;

&lt;p&gt;Bubble Sort is an easy sorting algorithm that repeatedly steps through the list, compares adjacent elements (next elements), and swaps them if they are in the wrong order. This process is repeated until the list is sorted. The algorithm gets its name because smaller elements “bubble” to the top of the list.&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Implementation:
&lt;/h2&gt;

&lt;p&gt;Let’s dive into the code to see how Bubble Sort is implemented in JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// By default ascending order&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bubble_sort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// get the length of an array&lt;/span&gt;
    &lt;span class="c1"&gt;//The outer loop controls the inner loop, which means the outer loop will decide how many times the inner loop will be run.&lt;/span&gt;
    &lt;span class="c1"&gt;//If the length is n then the outer loop runs n-1 times.&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
        &lt;span class="c1"&gt;// Inner loop will run based on the outer loop and compare the value, &lt;/span&gt;
        &lt;span class="c1"&gt;//If the first value is higher than the next value then swap it, loop must go on for each lowest value &lt;/span&gt;
        &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// checking if the first element greater than to the next element&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="c1"&gt;// then, swap the value array[j] to array[j+1]&lt;/span&gt;
                &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// return the sorted array;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// input data&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;bubble_sort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="c1"&gt;// output data after sorted!&lt;/span&gt;
&lt;span class="c1"&gt;// [3, 7, 9, 11, 12]; &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Output
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7sfs3vgq34ugl4ubbehn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7sfs3vgq34ugl4ubbehn.png" alt=" " width="720" height="103"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Sorting with Descding Orders:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Descending order&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bubble_sort_descending_order&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// checking if first element greter than next element,&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="c1"&gt;// then, swap the value array[j] to array[j+1]&lt;/span&gt;
                &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// input data&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;bubble_sort_descending_order&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="c1"&gt;// output data after sorted!&lt;/span&gt;
&lt;span class="c1"&gt;// [ 12, 11, 9, 7, 3 ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Output:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhk7c5rpevl5txujjy4i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhk7c5rpevl5txujjy4i.png" alt=" " width="800" height="65"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Already added comments and explained each line of the code above. but I will also explain in detail so it helps you to understand the complete process and codes.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Initialization: We start by determining the length of the array, which helps control the number of iterations.&lt;/li&gt;
&lt;li&gt;Outer Loop: This loop runs n-1 times, where n is the length of the array. Each iteration ensures that the next largest element is placed in its correct position.&lt;/li&gt;
&lt;li&gt;Inner Loop: For each pass of the outer loop, the inner loop compares adjacent elements and swaps them if they are out of order. The range of the inner loop decreases with each pass because the largest elements are already sorted at the end of the array.&lt;/li&gt;
&lt;li&gt;Swapping: If an element is greater than the next one, they are swapped using a temporary variable.&lt;/li&gt;
&lt;li&gt;Return: Finally, the sorted array is returned.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Optimized Version:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// optimized version:&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bubble_sort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// get the length of the array&lt;/span&gt;
    &lt;span class="c1"&gt;//The outer loop controls the inner loop, which means the outer loop will decide how many times the inner loop will be run.&lt;/span&gt;
    &lt;span class="c1"&gt;//If the length is n then the outer loop run n-1 times.&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
        &lt;span class="c1"&gt;// Inner loop will run based on the outer loop and compare the value, &lt;/span&gt;
        &lt;span class="c1"&gt;//If the first value is higher than the next value then swap it, loop must go on for each lowest value&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isSwapped&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;len&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;//check if the first element is greater than the next element&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="c1"&gt;// then, swap the value array[j] to array[j+1]&lt;/span&gt;
                &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
                &lt;span class="nx"&gt;isSwapped&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="c1"&gt;//If no element swap by inner loop then break;&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isSwapped&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// input data&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;bubble_sort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="c1"&gt;// output data after sorted!&lt;/span&gt;
&lt;span class="c1"&gt;// [3, 7, 9, 11, 12]; &lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explanations:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;for (let i = 0; i &amp;lt; len — 1; i++)&lt;/code&gt;
This is the outer loop, which runs &lt;code&gt;n-1&lt;/code&gt; times, where &lt;code&gt;n&lt;/code&gt; is the length of the array. The outer loop controls how many times the inner loop will execute. Each iteration of the outer loop ensures that the next largest element is placed in its correct position.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;let isSwapped = false&lt;/code&gt;
A boolean variable isSwapped is initialized to false. This variable is used to track whether any elements were swapped during the current pass of the inner loop. If no swaps occur, the array is already sorted, and the algorithm can terminate early.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;for (let j = 0; j &amp;lt; len — i — 1; j++) {&lt;/code&gt;
This is the inner loop, which iterates over the array elements up to &lt;code&gt;len - i - 1&lt;/code&gt;. The &lt;code&gt;- i&lt;/code&gt; part ensures that the loop does not consider the elements that have already been sorted in previous passes.&lt;/li&gt;
&lt;li&gt;if &lt;code&gt;(array[j] &amp;gt; array[j + 1]) {&lt;/code&gt;
This condition checks if the current element is greater than the next element. If true, a swap is necessary to order the elements correctly.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
                &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;temp&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
                &lt;span class="nx"&gt;isSwapped&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;These lines perform the swap of elements &lt;code&gt;array[j] and array[j + 1]&lt;/code&gt; using a temporary variable temp. After the swap, isSwapped is set to true, indicating that a swap has occurred.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isSwapped&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;After the inner loop completes, this condition checks if isSwapped is still false. If no swaps were made, the array is already sorted, and the outer loop can be exited early using break.&lt;/li&gt;
&lt;li&gt;Finally, the sorted array is returned.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;

&lt;p&gt;The time complexity of Bubble Sort is &lt;code&gt;(O(n²))&lt;/code&gt; in the worst and average cases, where &lt;code&gt;(n)&lt;/code&gt; is the number of elements in the array. This is because each element is compared with every other element. In the best case, when the array is already sorted, the time complexity can be &lt;code&gt;(O(n))&lt;/code&gt; if an optimization is added to stop the algorithm when no swaps are needed.&lt;/p&gt;

&lt;p&gt;In the best-case scenario, when the array is already sorted, the algorithm can terminate early due to the isSwapped optimization, resulting in a time complexity of &lt;code&gt;(O(n))&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Overall, bubble sorting is not efficient for large datasets due to its quadratic time complexity, but it can be useful for small arrays or as an educational tool to understand sorting algorithms.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Bubble Sort is an excellent algorithm for educational purposes due to its simplicity. However, it is not suitable for large datasets because of its quadratic time complexity. Despite its inefficiency, understanding Bubble Sort provides a foundation for learning more advanced sorting algorithms.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>datastructures</category>
      <category>learning</category>
      <category>javascript</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Sat, 21 Dec 2024 10:46:55 +0000</pubDate>
      <link>https://dev.to/mesonu/-25cg</link>
      <guid>https://dev.to/mesonu/-25cg</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/mesonu" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F832353%2Fd563118b-04e4-4be0-98e8-6e9856a3cb8d.jpg" alt="mesonu"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/mesonu/12-new-javascript-features-every-developer-should-know-4nln" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;12 New JavaScript Features Every Developer Should Know&lt;/h2&gt;
      &lt;h3&gt;Sonu kumar ・ Dec 21 '24&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#learning&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#node&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>discuss</category>
    </item>
    <item>
      <title>12 New JavaScript Features Every Developer Should Know</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Sat, 21 Dec 2024 10:45:00 +0000</pubDate>
      <link>https://dev.to/mesonu/12-new-javascript-features-every-developer-should-know-4nln</link>
      <guid>https://dev.to/mesonu/12-new-javascript-features-every-developer-should-know-4nln</guid>
      <description>&lt;p&gt;JavaScript is always evolving, and with each new version, it introduces features that make our lives as developers a little easier. Some of these features are game-changers, improving how we write and manage our code. If you’re a daily coder, it’s important to stay updated with these new features. In this post, I’ll walk you through some of the latest JavaScript features that are super useful and should be in your toolkit.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Optional Chaining (?.)
&lt;/h2&gt;

&lt;p&gt;One of the most useful features added in recent versions of JavaScript is optional chaining. This allows us to safely access deeply nested properties in objects without worrying about whether an intermediate property is null or undefined.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;

&lt;p&gt;Imagine you have a user object that may or may not have a profile:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;code&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// John&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;   &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without optional chaining, you would have to manually check each property, which can make the code messy. This small operator helps us avoid those checks, making the code cleaner and easier to read.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Nullish Coalescing Operator (??)
&lt;/h2&gt;

&lt;p&gt;The nullish coalescing operator (??) is another neat feature introduced to help handle null or undefined values without affecting other falsy values like 0 or false.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;userName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Guest&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt; &lt;span class="o"&gt;??&lt;/span&gt; &lt;span class="nx"&gt;defaultName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// 'Guest' because userName is an empty string&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Unlike the logical OR (||), which treats an empty string ("") or 0 as falsy values, ?? will only return the right-hand operand if the left is null or undefined.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Promise.allSettled()
&lt;/h2&gt;

&lt;p&gt;If you’re working with promises in JavaScript, you’ve probably used Promise.all(). But did you know there's a more powerful version called Promise.allSettled()? This method waits for all promises to settle, regardless of whether they were fulfilled or rejected. It’s super handy when you need to know the result of all promises, even if some fail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;p1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;p2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;p3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;allSettled&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;p1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;p2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;p3&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nl"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;

&lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fulfilled&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;rejected&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;reason&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fulfilled&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a great way to handle multiple async operations when you don’t want one failure to break the entire process.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. BigInt for Large Numbers
&lt;/h2&gt;

&lt;p&gt;We’ve all faced that problem of exceeding the limits of JavaScript’s Number type. JavaScript numbers are limited to values between -(2^53 - 1) and (2^53 - 1). If you need to work with numbers larger than that, BigInt is your friend.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;largeNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;BigInt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1234567890123456789012345678901234567890&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;largeNumber&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will give you the ability to work with arbitrarily large integers without worrying about precision errors.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. String.prototype.replaceAll()
&lt;/h2&gt;

&lt;p&gt;If you’ve ever tried to replace all occurrences of a substring in a string, you probably used a regular expression with the replace() method. With replaceAll(), it’s much simpler. This method replaces all occurrences of a substring, and you don’t have to worry about global regex flags.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World, Welcome to the World!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;updatedMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replaceAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Universe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;updatedMessage&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Hello Universe, Welcome to the Universe!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It’s simple, cleaner, and gets rid of the need for regular expressions.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Logical Assignment Operators (&amp;amp;&amp;amp;=, ||=, ??=)
&lt;/h2&gt;

&lt;p&gt;These new operators provide a shortcut to combine logical operators with assignments. They’re a great way to write more concise code.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;amp;&amp;amp;=&lt;/code&gt;: Assigns the value only if the left-hand value is truthy.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;||=&lt;/code&gt;: Assigns the value only if the left-hand value is falsy.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;??=&lt;/code&gt;: Assigns the value only if the left-hand value is null or undefined.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;||=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// count is now 10, because it was falsy&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// 10&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;??=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Anonymous&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// name is now 'Anonymous'&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Anonymous&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These shortcuts help you reduce the verbosity of your code.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Object.fromEntries()
&lt;/h2&gt;

&lt;p&gt;If you’ve ever needed to convert a list of key-value pairs into an object, Object.fromEntries() makes it easy. It’s particularly useful when you’re working with Map objects or arrays of tuples.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;entries&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;]];&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fromEntries&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;entries&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// { name: 'Alice', age: 25 }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This method is a cleaner, more readable alternative to manually constructing objects.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Array.prototype.flatMap()
&lt;/h2&gt;

&lt;p&gt;This method is a combination of map() followed by flat(). It allows you to both map and flatten the results in a single step, which can be very useful when working with arrays of arrays.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;flatMap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// [1, 2, 2, 4, 3, 6, 4, 8]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is cleaner than performing a map() followed by flat() separately.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Array.prototype.at()
&lt;/h2&gt;

&lt;p&gt;This new method makes it easy to access elements from the end of an array using negative indexes. It’s much more intuitive than manually calculating the index for the last item.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;at&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// 30&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;at&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// 50&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;at&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// 40&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It simplifies working with the last items in an array.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Top-Level Await
&lt;/h2&gt;

&lt;p&gt;In JavaScript, we’ve always had to use await inside an async function. But with top-level await, you can now use await directly at the top level of modules, making your asynchronous code more straightforward.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="c1"&gt;// In an ES Module (.mjs or type="module")&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.example.com/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes working with async code much simpler in modern JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Private Class Fields
&lt;/h2&gt;

&lt;p&gt;If you’ve ever wanted to make variables private in JavaScript classes, private class fields are now possible. You can now define variables that are not accessible from outside the class, using the # symbol.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;getName&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getName&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;  &lt;span class="c1"&gt;// John&lt;/span&gt;
&lt;span class="nx"&gt;This&lt;/span&gt; &lt;span class="nx"&gt;makes&lt;/span&gt; &lt;span class="nx"&gt;it&lt;/span&gt; &lt;span class="nx"&gt;easier&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;hide&lt;/span&gt; &lt;span class="nx"&gt;internal&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;details&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  12. Stable Sort (Array.prototype.sort())
&lt;/h2&gt;

&lt;p&gt;Previously, JavaScript’s sort() method was not stable, meaning equal items might be shuffled in an unpredictable way. Now, JavaScript ensures that elements with the same value retain their original order in the array.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// [{ age: 20 }, { age: 30 }, { age: 30 }]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This ensures a more predictable and consistent sort of behaviour.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;JavaScript continues to evolve, and these features bring both convenience and power to developers. Whether you’re working with asynchronous code, handling large numbers, or just cleaning up your object and array manipulations, these new features can help you write cleaner, more efficient code. If you haven’t already, start experimenting with them in your projects, and see how they can make your workflow smoother.&lt;/p&gt;

&lt;p&gt;Happy coding! 🚀&lt;/p&gt;

&lt;p&gt;Please follow me to get more valuable content&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>learning</category>
      <category>node</category>
    </item>
    <item>
      <title>What is a flattened array and How do solving flatten array problem using recursion functions in JavaScript?</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Tue, 23 Jul 2024 12:46:06 +0000</pubDate>
      <link>https://dev.to/mesonu/what-is-a-flattened-array-and-how-do-solving-flatten-array-problem-using-recursion-functions-in-javascript-2ihh</link>
      <guid>https://dev.to/mesonu/what-is-a-flattened-array-and-how-do-solving-flatten-array-problem-using-recursion-functions-in-javascript-2ihh</guid>
      <description>&lt;h2&gt;
  
  
  Introduction:
&lt;/h2&gt;

&lt;p&gt;First Lets understand What is a flattened array. A flattened Array is an Array, but this array is a form of a multi-dimension array, a nested array or an array containing another array. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Flatten is one approach or technique that helps to reduce the multidimensional array to one one-dimensional array known as flatten.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sometimes we require this kind of data when we are working on projects or solving a problem then it helps to pass the group of the data set using a flattened array.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// This is a flattened array
let arr = [1,44, [2, [3,9], 67], 9];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  How to solve a flattened array problems?
&lt;/h2&gt;

&lt;p&gt;There are multiple ways to solve this kind of problem but here, I am going to explain using the Recursion method, this is one of the best approaches to solve this kind of problem.&lt;/p&gt;

&lt;p&gt;Here, I am not going to details explanation of the Recursion, But I will give a little overview of about, if you want to know more about I will create a separate post for that.&lt;/p&gt;

&lt;p&gt;Recursion is a programming approach to solve the issues of repetition kinds of works,  which calls itself directly or indirectly until not match the given particular conditions, if matched then the function stops the calling itself.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; // This is a flattened array
// Input:
  let arr = [1,44, [2, [3,9], 67], 9];

  // Function Defin 
  function recur(a) {
    let newArr = [];
    for (let i =0 ; i &amp;lt; a.length; i++) {
        const element = a[i];
        if (Array.isArray(element)) {
            // Function calling itself recursion
            newArr.push(...recur(element))
        } else  {
            newArr.push(element)
        }
    }

    return newArr;
  }

console.log(recur(arr))
Output:
[1,44,2,3,9, 67, 9]

// We can also write the same code using for each:
function flattenArray(items) {
    const flat = [];
    items.forEach(item =&amp;gt; {
      if (Array.isArray(item)) {
        flat.push(...flatten(item));
      } else {
        flat.push(item);
      }
    });

    return flat;
  }

onsole.log(flattenArray(arr))
output:
[1,44,2,3,9, 67, 9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>programming</category>
      <category>webdev</category>
      <category>datastructures</category>
    </item>
    <item>
      <title>What is the difference between a deep copy and a shallow copy in JavaScript?</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Sat, 06 Jul 2024 09:12:34 +0000</pubDate>
      <link>https://dev.to/mesonu/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy-in-javascript-ll8</link>
      <guid>https://dev.to/mesonu/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy-in-javascript-ll8</guid>
      <description>&lt;h2&gt;
  
  
  Deep Copy And Shallow Copy:
&lt;/h2&gt;

&lt;p&gt;Sometimes we need to copy the value from one variable to another variable is known as copy. But when we are copying the value from one variable to another variable that means we are copying the reference of that variable, which means we are not creating the new variable for that just assigned the reference of the variable.&lt;/p&gt;

&lt;p&gt;So when we made the changes on the copied variable object/ array it also gets changes on the original variable value, which is known as Shallow Copy if when are any changes on the copied variable then not getting any changing the original variable values are known as Deep Copy&lt;/p&gt;

&lt;p&gt;Example: how to make the deep copy and shallow copy:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//original
  var userObj = {
    name: "Jhon",
    address:{
      City: {
        name: "Noida"
      }
    }
  }

  //wanted to copy
  var copyUserObj = userObj; // shallow copy

  ///Here we are doing the changes:
  copyUserObj.name = "jhon de-costa"

  console.log(userObj);
  output:
  {
    "name": "Jhon De-costa",
    "address": {
      "city": {
        "name": "Noida"
      }
    }
  }


  To avoid these things we deep copy using the ES6 spread operator:

  copyUserObj = {...userObj}

  copyUserObj.name = "jhon de-costa"


  console.log(userObj)
  output:
   {
    name: "Jhon",
    address:{
      City: {
        name: "Noida"
      }
    }
  }


  console.log(copyUserObj)
  output:
   {
    "name": "Jhon De-costa",
    "address": {
      "city": {
        "name": "Noida"
      }
    }
  }


  Ex:2
  var arr1 = [1, 2, 4]

  //Wanted to copy here array to arr2
  var arr2 =  arr1;

  arr2[1] = 4
  console.log(arr1);


  output:
  [1,4,4]


  //deep copy using spred {...} oprator 

  arr2= [...arr1];

  console.log(arr2)
  output:
  [1,2,4]

  //after modifcation of arr2 the value 

  var arr2 = [1,4,4]
  console.log(arr1)

  output:
  [1,2,4]

  console.log(arr2)

  output:
  [1,4,4]


  If you have any doubts please comment I will clear your doubts;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>react</category>
    </item>
    <item>
      <title>How to Install and Manage Multiple Node.js Versions on macOS Using NVM</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Thu, 27 Jun 2024 04:02:15 +0000</pubDate>
      <link>https://dev.to/mesonu/how-to-install-and-manage-multiple-nodejs-versions-on-macos-using-nvm-2jfh</link>
      <guid>https://dev.to/mesonu/how-to-install-and-manage-multiple-nodejs-versions-on-macos-using-nvm-2jfh</guid>
      <description>&lt;p&gt;As a developer working with Node.js, we might need to work on various projects and each project has its configuration. So maybe some of the projects have different versions of Node.js, and then we need to switch between different versions of Node.js for multiple projects. The Node Version Manager (NVM) is a fantastic tool that makes this process easier. In this guide, we'll cover three ways to install NVM on macOS and show you how to manage multiple Node.js versions with ease.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is NVM?
&lt;/h2&gt;

&lt;p&gt;NVM is a version manager for Node.js, designed to simplify the installation and management of multiple Node.js versions on a single machine. With NVM, you can easily switch between different versions of Node.js as per your project's requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before we start, ensure you have the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A macOS machine ( This method support for all versions of macOS including M1, M2 and Intel)&lt;/li&gt;
&lt;li&gt;Command Line Tools (you can install them by running &lt;code&gt;xcode-select - install&lt;/code&gt; in the Terminal)
Now, let's explore the three ways to install NVM on macOS:&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Method 1: Installing NVM Using the Curl Command
&lt;/h3&gt;

&lt;p&gt;This is the recommended method from the official NVM GitHub repository.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Open Terminal&lt;/strong&gt;: Launch the Terminal application on your macOS.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Download and Install NVM&lt;/strong&gt;: Run the following command to download and install NVM:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; curl &lt;span class="nt"&gt;-o-&lt;/span&gt; https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Load NVM&lt;/strong&gt;: After installation, you need to load NVM into your current terminal session. Add the following lines to your shell profile file (e.g., &lt;code&gt;.zshrc&lt;/code&gt; for Zsh or &lt;code&gt;.bash_profile&lt;/code&gt; for Bash):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;amp;&amp;amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
 [ -s "$NVM_DIR/nvm.sh" ] &amp;amp;&amp;amp; \. "$NVM_DIR/nvm.sh" # This loads nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Apply Changes&lt;/strong&gt;: Run the following command to apply the changes:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;source ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Verify Installation&lt;/strong&gt;: Check if NVM is installed correctly by running:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm - version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Method 2: Installing NVM Using Homebrew
&lt;/h3&gt;

&lt;p&gt;Homebrew is a popular package manager for macOS.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Open Terminal&lt;/strong&gt;: Launch the Terminal application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Install Homebrew&lt;/strong&gt; (if not already installed):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Install NVM with Homebrew&lt;/strong&gt;: Run the following command to install NVM:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Create NVM Directory&lt;/strong&gt;: Create a directory for NVM:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; mkdir ~/.nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Load NVM&lt;/strong&gt;: Add the following lines to your shell profile file (e.g., &lt;code&gt;.zshrc&lt;/code&gt; or &lt;code&gt;.bash_profile&lt;/code&gt;):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export NVM_DIR="$HOME/.nvm"
 . "$(brew - prefix nvm)/nvm.sh"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Apply Changes&lt;/strong&gt;: Run the following command to apply the changes:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;source ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Verify Installation&lt;/strong&gt;: Check if NVM is installed correctly by running:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm - version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Method 3: Installing NVM Using MacPorts
&lt;/h3&gt;

&lt;p&gt;MacPorts is another package management system for macOS.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Open Terminal&lt;/strong&gt;: Launch the Terminal application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Install MacPorts&lt;/strong&gt; (if not already installed):
 - Download and install MacPorts from the &lt;a href="https://www.macports.org/install.php" rel="noopener noreferrer"&gt;official MacPorts website&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Install NVM with MacPorts&lt;/strong&gt;: Run the following command to install NVM:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo port install nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Load NVM&lt;/strong&gt;: Add the following lines to your shell profile file (e.g., &lt;code&gt;.zshrc&lt;/code&gt; or &lt;code&gt;.bash_profile&lt;/code&gt;):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export NVM_DIR="$HOME/.nvm"
 . /opt/local/share/nvm/init-nvm.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Apply Changes&lt;/strong&gt;: Run the following command to apply the changes:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;source ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Verify Installation&lt;/strong&gt;: Check if NVM is installed correctly by running:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm - version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Managing Multiple Node.js Versions with NVM
&lt;/h2&gt;

&lt;p&gt;Now that you have NVM installed, let's see how you can manage multiple Node.js versions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Installing a Specific Node.js Version
&lt;/h3&gt;

&lt;p&gt;To install a specific version of Node.js, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;install&lt;/span&gt; &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, to install Node.js version 14.17.0:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;install &lt;/span&gt;14.17.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Listing Installed Node.js Versions
&lt;/h3&gt;

&lt;p&gt;To list all installed Node.js versions, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;ls&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Switching Between Node.js Versions
&lt;/h3&gt;

&lt;p&gt;To switch to a specific version of Node.js, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm use &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, to switch to Node.js version 14.17.0:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm use 14.17.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Setting a Default Node.js Version
&lt;/h3&gt;

&lt;p&gt;To set a default Node.js version, which will be used whenever you open a new terminal session, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;alias &lt;/span&gt;default &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, to set Node.js version 14.17.0 as the default:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;alias &lt;/span&gt;default 14.17.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Conclusion&lt;br&gt;
With NVM, managing multiple Node.js versions on macOS is a breeze. Whether you choose to install NVM using the curl command, Homebrew, or MacPorts, you now have the tools to easily switch between Node.js versions and ensure your projects run smoothly. Happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>node</category>
      <category>macos</category>
    </item>
    <item>
      <title>Simplified Guide to Installing NVM on Ubuntu</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Wed, 26 Jun 2024 12:13:47 +0000</pubDate>
      <link>https://dev.to/mesonu/simplified-guide-to-installing-nvm-on-ubuntu-3dpa</link>
      <guid>https://dev.to/mesonu/simplified-guide-to-installing-nvm-on-ubuntu-3dpa</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkkvb06xpjn3pkfo93216.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkkvb06xpjn3pkfo93216.png" alt="Guide to Installing NVM on Ubuntu" width="284" height="177"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Introduction
&lt;/h4&gt;

&lt;p&gt;Managing multiple versions of Node.js on your Ubuntu system is crucial for development. Node Version Manager (NVM) simplifies this process, allowing you to switch between different versions effortlessly.&lt;/p&gt;

&lt;h4&gt;
  
  
  Step-by-Step Installation
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Update Your System&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   sudo apt update
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Install Curl&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   sudo apt install curl
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Download and Install NVM&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Activate NVM&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;amp;&amp;amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;amp;&amp;amp; \. "$NVM_DIR/nvm.sh" # This loads nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Verify NVM Installation&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   nvm --version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Install Node.js Using NVM&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   nvm install node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Set Default Node.js Version&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   nvm alias default node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Check Installed Node.js Version&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   node --version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Managing Node.js Versions
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Install Specific Version&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  nvm install &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Switch Node.js Version&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  nvm use &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;List Installed Versions&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  nvm ls
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Uninstall Node.js Version&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  nvm uninstall &amp;lt;version&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Conclusion
&lt;/h4&gt;

&lt;p&gt;Using NVM on Ubuntu provides flexibility and control over your Node.js environment, making development smoother and more efficient. &lt;/p&gt;

&lt;p&gt;To know how to install the NVM on Windows please have a look:&lt;br&gt;
&lt;a href="https://dev.to/mesonu/how-to-install-nvmnode-version-manager-on-windows-2ij1"&gt;How to install NVM(Node Version Manager) on Windows&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fskqz3ml9uk79n5q89eyu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fskqz3ml9uk79n5q89eyu.png" alt=" " width="284" height="177"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To learn about the Docker basics please have a look:&lt;br&gt;
&lt;a href="https://medium.com/@me.sonu300/what-is-docker-and-why-do-we-use-it-c86b11559b3b" rel="noopener noreferrer"&gt;What is Docker and why do we use it?&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>node</category>
    </item>
    <item>
      <title>Understanding Linux Permissions and Ownership</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Wed, 26 Jun 2024 04:02:08 +0000</pubDate>
      <link>https://dev.to/mesonu/understanding-linux-permissions-and-ownership-39kg</link>
      <guid>https://dev.to/mesonu/understanding-linux-permissions-and-ownership-39kg</guid>
      <description>&lt;p&gt;Linux is a powerful operating system, and one of its core features is its robust permissions and ownership model. Understanding how to manage these permissions and ownership is crucial for maintaining system security and ensuring proper access control. In this blog post, we'll break down Linux permissions and ownership, explaining why and when you should use them, along with easy-to-understand examples.&lt;/p&gt;

&lt;h4&gt;
  
  
  What are Linux Permissions?
&lt;/h4&gt;

&lt;p&gt;Linux permissions determine who can read, write, or execute a file. Every file and directory in Linux has three types of permissions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Read (&lt;code&gt;r&lt;/code&gt;)&lt;/strong&gt;: Allows viewing the contents of a file or listing a directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Write (&lt;code&gt;w&lt;/code&gt;)&lt;/strong&gt;: Allows modifying the contents of a file or adding/removing files in a directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Execute (&lt;code&gt;x&lt;/code&gt;)&lt;/strong&gt;: Allows running a file as a program or accessing a directory.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These permissions are assigned to three categories of users:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Owner&lt;/strong&gt;: The user who owns the file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Group&lt;/strong&gt;: A set of users who share access rights to the file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Others&lt;/strong&gt;: Everyone else who has access to the system.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Understanding the Permission Notation
&lt;/h4&gt;

&lt;p&gt;Permissions are often represented in a shorthand notation, such as &lt;code&gt;rwxr-xr--&lt;/code&gt;. Here’s how to read it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The first character indicates the type (&lt;code&gt;-&lt;/code&gt; for a file, &lt;code&gt;d&lt;/code&gt; for a directory).&lt;/li&gt;
&lt;li&gt;The next three characters (&lt;code&gt;rwx&lt;/code&gt;) are the owner's permissions.&lt;/li&gt;
&lt;li&gt;The middle three characters (&lt;code&gt;r-x&lt;/code&gt;) are the group's permissions.&lt;/li&gt;
&lt;li&gt;The last three characters (&lt;code&gt;r--&lt;/code&gt;) are the others' permissions.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Viewing Permissions
&lt;/h4&gt;

&lt;p&gt;To view the permissions of a file or directory, use the &lt;code&gt;ls -l&lt;/code&gt; command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nt"&gt;-rwxr-xr--&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This output shows that the owner can read, write, and execute the file, the group can read and execute, and others can only read.&lt;/p&gt;

&lt;h4&gt;
  
  
  Changing Permissions with &lt;code&gt;chmod&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;chmod&lt;/code&gt; command is used to change the permissions of a file or directory. You can use symbolic or numeric modes to set permissions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Symbolic Mode&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Symbolic mode uses letters to represent permissions and users:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;u&lt;/code&gt; (user/owner)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;g&lt;/code&gt; (group)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;o&lt;/code&gt; (others)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;a&lt;/code&gt; (all)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To add, remove, or set permissions, use &lt;code&gt;+&lt;/code&gt;, &lt;code&gt;-&lt;/code&gt;, or &lt;code&gt;=&lt;/code&gt; respectively.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;u+x file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command adds execute permission for the owner.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Numeric Mode&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Numeric mode uses a three-digit octal number to represent permissions. Each digit ranges from 0 to 7, representing the sum of the permissions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;4&lt;/code&gt; for read (&lt;code&gt;r&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;2&lt;/code&gt; for write (&lt;code&gt;w&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;1&lt;/code&gt; for execute (&lt;code&gt;x&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;755 file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command sets the permissions to &lt;code&gt;rwxr-xr-x&lt;/code&gt;, where the owner has full permissions, and the group and others have read and execute permissions.&lt;/p&gt;

&lt;h4&gt;
  
  
  Ownership in Linux
&lt;/h4&gt;

&lt;p&gt;Every file and directory in Linux has an owner and a group associated with it. This helps manage who can access and modify files.&lt;/p&gt;

&lt;h4&gt;
  
  
  Viewing Ownership
&lt;/h4&gt;

&lt;p&gt;To view the ownership of a file or directory, use the &lt;code&gt;ls -l&lt;/code&gt; command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nt"&gt;-rwxr-xr--&lt;/span&gt; 1 owner_name group_name file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This output shows the owner (&lt;code&gt;owner_name&lt;/code&gt;) and the group (&lt;code&gt;group_name&lt;/code&gt;).&lt;/p&gt;

&lt;h4&gt;
  
  
  Changing Ownership with &lt;code&gt;chown&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;chown&lt;/code&gt; command changes the ownership of a file or directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chown &lt;/span&gt;new_owner file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To change both owner and group, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chown &lt;/span&gt;new_owner:new_group file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chown &lt;/span&gt;alice:developers project_code.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command sets the owner to &lt;code&gt;alice&lt;/code&gt; and the group to &lt;code&gt;developers&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Changing Group with &lt;code&gt;chgrp&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;chgrp&lt;/code&gt; command changes the group ownership of a file or directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chgrp &lt;/span&gt;new_group file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chgrp &lt;/span&gt;developers project_code.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command sets the group to &lt;code&gt;developers&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Why and When to Use Permissions and Ownership
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Security&lt;/strong&gt;: Properly setting permissions and ownership helps protect sensitive files from unauthorized access. For example, configuration files should be readable and writable only by the owner.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;600 config_file
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Collaboration&lt;/strong&gt;: When working on projects with others, setting group permissions allows team members to collaborate without compromising security. For instance, a shared directory for a development team:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;770 shared_directory
&lt;span class="nb"&gt;chown&lt;/span&gt; :developers shared_directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Executable Files&lt;/strong&gt;: Scripts and programs need execute permissions to run. For example, making a script executable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod&lt;/span&gt; +x script.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Web Servers&lt;/strong&gt;: Web server files should be readable by the server but not writable by the web service user, preventing unauthorized modifications.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;644 index.html
&lt;span class="nb"&gt;chown &lt;/span&gt;www-data:www-data index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Understanding and managing Linux permissions and ownership is essential for maintaining system security and ensuring proper access control. By mastering these concepts, you can keep safe your files, collaborate effectively, and manage your system more efficiently and secure. Practice these commands regularly to become proficient in handling permissions and ownership in Linux.&lt;/p&gt;

</description>
      <category>linux</category>
      <category>webdev</category>
      <category>programming</category>
      <category>devops</category>
    </item>
    <item>
      <title>Essential Linux Commands for Daily Use as a Developer</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Wed, 26 Jun 2024 03:58:33 +0000</pubDate>
      <link>https://dev.to/mesonu/essential-linux-commands-for-daily-use-as-a-developer-3l0l</link>
      <guid>https://dev.to/mesonu/essential-linux-commands-for-daily-use-as-a-developer-3l0l</guid>
      <description>&lt;p&gt;As a software developer, mastering Linux commands can significantly enhance your productivity and streamline your workflow. Whether you're managing files, navigating directories, or automating tasks, Linux offers a robust set of commands that are invaluable for daily use. In this blog post, we'll cover some of the most essential Linux commands every developer should know, with examples to illustrate their use.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Navigating the File System
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;ls&lt;/code&gt;&lt;/strong&gt;: List Directory Contents&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;ls&lt;/code&gt; command is used to list the files and directories in the current directory. It's one of the most frequently used commands in Linux.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also use options to modify its behavior, such as &lt;code&gt;-l&lt;/code&gt; for a detailed list and &lt;code&gt;-a&lt;/code&gt; to show hidden files.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-la&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;cd&lt;/code&gt;&lt;/strong&gt;: Change Directory&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;cd&lt;/code&gt; command allows you to navigate between directories.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; /path/to/directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To go back to the previous directory, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; -
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To go to your home directory, simply use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. Managing Files and Directories
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;cp&lt;/code&gt;&lt;/strong&gt;: Copy Files and Directories&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;cp&lt;/code&gt; command is used to copy files and directories.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cp &lt;/span&gt;source_file destination_file
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To copy an entire directory, use the &lt;code&gt;-r&lt;/code&gt; option:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cp&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; source_directory destination_directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;mv&lt;/code&gt;&lt;/strong&gt;: Move or Rename Files and Directories&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;mv&lt;/code&gt; command moves or renames files and directories.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mv &lt;/span&gt;old_name new_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To move a file to a different directory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mv &lt;/span&gt;file_name /path/to/destination
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;rm&lt;/code&gt;&lt;/strong&gt;: Remove Files and Directories&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;rm&lt;/code&gt; command is used to delete files and directories.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;rm &lt;/span&gt;file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To delete a directory and its contents, use the &lt;code&gt;-r&lt;/code&gt; option:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;rm&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; directory_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Use caution with the &lt;code&gt;rm&lt;/code&gt; command, especially with the &lt;code&gt;-r&lt;/code&gt; option, as it permanently deletes files.&lt;/strong&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Viewing and Editing Files
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;cat&lt;/code&gt;&lt;/strong&gt;: Concatenate and Display Files&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;cat&lt;/code&gt; command displays the contents of a file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For larger files, &lt;code&gt;cat&lt;/code&gt; can be combined with &lt;code&gt;less&lt;/code&gt; for easier reading:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;file_name | less
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;nano&lt;/code&gt;&lt;/strong&gt;: Text Editor&lt;/p&gt;

&lt;p&gt;&lt;code&gt;nano&lt;/code&gt; is a simple, user-friendly text editor.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nano file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To save your changes in &lt;code&gt;nano&lt;/code&gt;, press &lt;code&gt;CTRL + O&lt;/code&gt;, and to exit, press &lt;code&gt;CTRL + X&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;grep&lt;/code&gt;&lt;/strong&gt;: Search Text Using Patterns&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;grep&lt;/code&gt; command searches for a specific pattern within files.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'search_term'&lt;/span&gt; file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To search recursively through directories, use the &lt;code&gt;-r&lt;/code&gt; option:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; &lt;span class="s1"&gt;'search_term'&lt;/span&gt; /path/to/directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  4. System Information and Management
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;top&lt;/code&gt;&lt;/strong&gt;: Display Active Processes&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;top&lt;/code&gt; command provides a real-time view of the system's processes, showing CPU and memory usage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;top
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To exit &lt;code&gt;top&lt;/code&gt;, press &lt;code&gt;q&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;df&lt;/code&gt;&lt;/strong&gt;: Disk Space Usage&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;df&lt;/code&gt; command displays disk space usage for all mounted filesystems.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;df&lt;/span&gt; &lt;span class="nt"&gt;-h&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;-h&lt;/code&gt; option makes the output human-readable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;free&lt;/code&gt;&lt;/strong&gt;: Memory Usage&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;free&lt;/code&gt; command shows the system's memory usage.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;free &lt;span class="nt"&gt;-h&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;-h&lt;/code&gt; option again makes the output human-readable.&lt;/p&gt;

&lt;h4&gt;
  
  
  5. Networking
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;ping&lt;/code&gt;&lt;/strong&gt;: Test Network Connectivity&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;ping&lt;/code&gt; command checks the connectivity between your system and another host.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ping www.example.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Press &lt;code&gt;CTRL + C&lt;/code&gt; to stop the pinging process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;curl&lt;/code&gt;&lt;/strong&gt;: Transfer Data from or to a Server&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;curl&lt;/code&gt; command is used to transfer data from or to a server, using various protocols.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl http://www.example.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To download a file, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-O&lt;/span&gt; http://www.example.com/file.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6. Permissions and Ownership
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;chmod&lt;/code&gt;&lt;/strong&gt;: Change File Permissions&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;chmod&lt;/code&gt; command modifies file permissions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chmod &lt;/span&gt;755 file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This sets the permissions to &lt;code&gt;rwxr-xr-x&lt;/code&gt;, where the owner has full permissions, and others have read and execute permissions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;chown&lt;/code&gt;&lt;/strong&gt;: Change File Owner&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;chown&lt;/code&gt; command changes the owner of a file or directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chown &lt;/span&gt;user:group file_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To change ownership recursively, use the &lt;code&gt;-R&lt;/code&gt; option:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;chown&lt;/span&gt; &lt;span class="nt"&gt;-R&lt;/span&gt; user:group directory_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  7. Combining Commands
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;&amp;amp;&amp;amp;&lt;/code&gt;&lt;/strong&gt;: Run Multiple Commands Sequentially&lt;/p&gt;

&lt;p&gt;You can combine multiple commands using &lt;code&gt;&amp;amp;&amp;amp;&lt;/code&gt; to run them sequentially.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; /path/to/directory &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;ls&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command changes the directory and then lists its contents.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;|&lt;/code&gt; (Pipe)&lt;/strong&gt;: Pass Output from One Command to Another&lt;/p&gt;

&lt;p&gt;The pipe &lt;code&gt;|&lt;/code&gt; is used to pass the output of one command as input to another.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s1"&gt;'search_term'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command lists the directory contents and then searches for a specific term.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Knowing these fundamental Linux commands will make your daily tasks as a software developer much easier. From managing files and directories to viewing system information and handling network tasks, these commands form the backbone of your interaction with the Linux operating system. Practice using them regularly to improve your efficiency and become more proficient with Linux.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>learning</category>
      <category>development</category>
      <category>linux</category>
    </item>
    <item>
      <title>How to install NVM(Node Version Manager) on Windows</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Tue, 25 Jun 2024 07:46:54 +0000</pubDate>
      <link>https://dev.to/mesonu/how-to-install-nvmnode-version-manager-on-windows-2ij1</link>
      <guid>https://dev.to/mesonu/how-to-install-nvmnode-version-manager-on-windows-2ij1</guid>
      <description>&lt;p&gt;&lt;a href="https://github.com/nvm-sh/nvm" rel="noopener noreferrer"&gt;NVM&lt;/a&gt; is a Node Version Manager used to manage multiple Node.js versions on systems.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why NVM Need?
&lt;/h2&gt;

&lt;p&gt;NVM makes it easy to install and manage different Node versions on your machine or laptop, and you can switch between them whenever you need it from one node version to another based on your need. To switch to another version of node.js, you have to run a few commands, which I will explain in the below sections.&lt;/p&gt;

&lt;p&gt;Suppose you have installed the specific version of node 18.0.0 on your machine, and you will get another project that project needs a higher or lower version of node.js (either node version 20.0.0 or 16.0.0 )to run the project on your machine but your system has node 18.0.0. So when you try to install packages and run the project you will get the Node version.&lt;/p&gt;

&lt;p&gt;In the following sections, I’ll guide you through installing NVM on your Windows, Linux, or Mac device.&lt;/p&gt;

&lt;p&gt;Before proceeding, I recommend uninstalling Node.js if you installed it to avoid conflicts between Node.js and NVM.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghxy62dk5mp2wsqattza.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghxy62dk5mp2wsqattza.png" alt="Node version error" width="720" height="98"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Installing NVM on Windows
&lt;/h2&gt;

&lt;p&gt;NVM is primarily supported on Linux and Mac, but not on Windows. However, there’s a similar tool called &lt;a href="https://github.com/coreybutler/nvm-windows" rel="noopener noreferrer"&gt;nvm-windows&lt;/a&gt; created by &lt;a href="https://github.com/coreybutler" rel="noopener noreferrer"&gt;Corey Butler&lt;/a&gt;, which provides a similar experience for managing Node.js versions on Windows.&lt;/p&gt;

&lt;h2&gt;
  
  
  Below are the steps on how to install nvm-windows:
&lt;/h2&gt;

&lt;h2&gt;
  
  
  1. Download nvm-windows:
&lt;/h2&gt;

&lt;p&gt;Go to the nvm-windows repository README file and click on the Download Now button, Or you can click here to Download. This will take you to a page with various NVM releases.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6y7g5nudfots7sr0bxt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6y7g5nudfots7sr0bxt.png" alt="nvm-windows download" width="720" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Download the NVM for Windows
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Install the .exe file:&lt;/strong&gt;
Once you are redirected to the release page (currently version 1.1.12) click on nvm-setup.exe and it downloads the nvm-windows on your machine.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fju2fuiow0ug24s6a3e7i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fju2fuiow0ug24s6a3e7i.png" alt="nvm-windows release page" width="720" height="170"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Run the installer:&lt;/strong&gt;&lt;br&gt;
Open the downloaded file and follow the prompts to complete the installation wizard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Verify the installation:&lt;/strong&gt;&lt;br&gt;
After installation, open a command prompt and run:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm -v
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If everything is installed correctly, this command will display the installed NVM version.&lt;/p&gt;

&lt;p&gt;NVM Commands for switching between Node versions:&lt;/p&gt;

&lt;p&gt;To view available Node versions, run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can see what the list of node versions available in the machine looks like,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F639tc7bca8xh5vyc36mx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F639tc7bca8xh5vyc36mx.png" alt="NVM list command to see the list of node versions" width="800" height="161"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to select a specific version of the node.js that version is in the above list (screenshot image). Then run the below commands to select the particular node version and press enter.&lt;/p&gt;

&lt;p&gt;Here I am selecting node version 14.17.1&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm use v14.17.1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Verified selected node version:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node -v
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then you will see the selected node version instead of the default one, here I have selected node 14 so it will show nod 14 for me.&lt;/p&gt;

&lt;p&gt;What happens if the specified version of the node is not available then we have to install it using nvm command and then select it from the above steps.&lt;/p&gt;

&lt;p&gt;To install a specific node version:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;nvm install 20.0.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Thank you for reading our article, I have tried to cover the all-important command and steps for more details visit the nvm-windows&lt;/p&gt;

&lt;p&gt;Please like follow and share, I need your support!!&lt;br&gt;
Thank you!!&lt;/p&gt;

&lt;p&gt;Follow Me on:&lt;br&gt;
&lt;a href="https://www.linkedin.com/in/sonu-k-76625a93/" rel="noopener noreferrer"&gt;Linkedin&lt;/a&gt;&lt;br&gt;
&lt;a href="https://medium.com/@me.sonu300" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;&lt;br&gt;
&lt;a href="https://x.com/me_sonu300" rel="noopener noreferrer"&gt;X(formally known as Twitter)&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>node</category>
      <category>programming</category>
    </item>
    <item>
      <title>What is Docker and why do we use it?</title>
      <dc:creator>Sonu kumar</dc:creator>
      <pubDate>Mon, 24 Jun 2024 12:28:54 +0000</pubDate>
      <link>https://dev.to/mesonu/what-is-docker-and-why-do-we-use-it-280n</link>
      <guid>https://dev.to/mesonu/what-is-docker-and-why-do-we-use-it-280n</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7169tbl57211ton0xccv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7169tbl57211ton0xccv.png" alt="Diagram illustrating Docker’s role in building, testing, and deploying applications" width="300" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Docker?
&lt;/h2&gt;

&lt;p&gt;Docker is a free software tool that helps you build, test, and deploy applications quickly. It allows you to manage your application’s infrastructure just like you manage software on your computer. This makes it easy to move your application between different computers or environments without worrying about compatibility issues.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why do use Docker?
&lt;/h2&gt;

&lt;p&gt;With Docker, you can manage your applications and setup just like you manage programs and applications on your own computer. It means you can easily set up, run and test your applications on a personal laptop and cloud machine without any compatibility and environment issues. Docker simplifies the process of getting your applications up and running, making development and deployment very easy.&lt;/p&gt;

&lt;h2&gt;
  
  
  Docker’s Origin
&lt;/h2&gt;

&lt;p&gt;Docker was developed and created by ‘Solomon Hykes’ in March 20, 2013, For more details visit the Git repository: and Docker's official website Docker.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Infrastructure?
&lt;/h2&gt;

&lt;p&gt;I hope you know about it, but if you don’t, I will explain it to you. Infrastructure is simply a setup of tools, software, and other necessary elements that are needed to run an application. This setup, which includes all the hardware, software, and connections, is known as infrastructure.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Docker Container?
&lt;/h2&gt;

&lt;p&gt;Docker is using a technology called OS-level virtualization, which allows you to create “containers.”&lt;/p&gt;

&lt;p&gt;A container is like a small, lightweight package of docker that includes everything your application needs to run, such as code, libraries, and settings. This way, you can be sure your application will work the same way everywhere, whether it’s on your computer, someone else’s, or even on servers in the cloud.&lt;/p&gt;

&lt;p&gt;In simple terms, Docker makes it easier to develop, test, and deploy applications by putting them in these handy containers, ensuring they run consistently no matter where they are used.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Docker engine?
&lt;/h2&gt;

&lt;p&gt;A Docker Engine is a part of Docker and it is hosted the Containers is called the Docker Engine. Docker Engine acts as client-server with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A docker engine is running the daemon process docked&lt;/li&gt;
&lt;li&gt;A docker Engine provides APIs, which specify an interface to talk with the Docker daemon.&lt;/li&gt;
&lt;li&gt;A docker Engine provides the command line interface (CLI) &lt;/li&gt;
&lt;li&gt;client to communicate with Docker and their packages.&lt;/li&gt;
&lt;li&gt;For more details: &lt;a href="https://docs.docker.com/engine" rel="noopener noreferrer"&gt;Docker Engine&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is Docker Desktop?
&lt;/h2&gt;

&lt;p&gt;A Docker Desktop is a docker tool that provides the Graphical User Interface (GUI), where you can see and manage the containers, applications, images, networks and volumes from your computers.&lt;br&gt;
You can download and install the &lt;a href="https://docs.docker.com/desktop" rel="noopener noreferrer"&gt;Docker Desktop&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Docker Compose?
&lt;/h2&gt;

&lt;p&gt;Docker Compose is a tool that makes it easy to run applications with multiple containers. It helps streamline both development and deployment processes.&lt;/p&gt;

&lt;p&gt;With Docker Compose, you define your entire application setup, including services, networks, and storage, in one simple YAML file. This file describes how all parts of your application work together. Then, with just one command, you can start up everything based on this configuration.&lt;/p&gt;

&lt;p&gt;Compose is versatile and works in all stages of development, including production, staging, development, testing, and continuous integration (CI). It offers commands to manage your application’s lifecycle, such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Starting, stopping, and rebuilding services&lt;/li&gt;
&lt;li&gt;Checking the status of running services&lt;/li&gt;
&lt;li&gt;Viewing live logs of running services&lt;/li&gt;
&lt;li&gt;Running specific commands on any service&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is Docker Build?
&lt;/h2&gt;

&lt;p&gt;Docker Build is a crucial feature of Docker Engine. It’s used whenever you create a Docker image, which is a package containing your application and everything it needs to run.&lt;/p&gt;

&lt;p&gt;Docker Build isn’t just a simple command; it’s an entire system designed to help you package, bundle, and ship your code efficiently. It plays a vital role in the software development process, making it easy to create consistent, portable application images.&lt;/p&gt;

&lt;p&gt;With Docker Build, you get a range of tools and features that support both basic and advanced tasks. Whether you’re just getting started or working on complex projects, Docker Build helps streamline your workflow and ensure your applications are ready to run anywhere.&lt;/p&gt;

&lt;p&gt;For more details visit the &lt;a href="https://www.docker.com/" rel="noopener noreferrer"&gt;Docker&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This is Part 1 of an overview of Docker and its components. In Part 2, I will share how to install and set up Docker with examples. Stay tuned for complete tutorials with examples. Please like, follow, and share this post!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Please Follow me:&lt;br&gt;
&lt;a href="https://dev.to/mesonu"&gt;Dev&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.linkedin.com/in/sonu-k-76625a93/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

</description>
      <category>docker</category>
      <category>containers</category>
      <category>learning</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
