DEV Community: Faruk Sardar

How to Generate Random HEX Color in JavaScript? [Easy Guide]

Faruk Sardar — Wed, 31 Jul 2024 17:25:45 +0000

In this article, I will guide you through creating a JavaScript function that generates a random hex color code composed of a mix of numbers and alphabets.

This function generates a random hex color each time it is executed:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. Generating Random Numbers

In the first step we need to generate random numbers and we can easily do that using the JavaScript Math Object and Math random() Method.

If you create a normal random method then it will give you random decimal numbers see the example below:

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

But we need to generate a random number between 0 and 16777215, you might be thinking why do I need 16777215 instead of "999999" or any six-digit number well we need to use this eight-digit number because the number 16,777,215 is the highest value you can have with a six-digit hex color code.

Hex color codes use six digits, where each digit can be from 0 to 9 or A to F, giving 16 possible choices for each digit.

This means you can create a total of 16,777,216 different colors with six digits. The largest hex color code is #FFFFFF, which corresponds to 16,777,215 in decimal.

So, by using a number up to 16,777,215, you can cover all possible colors represented by a six-digit hex code, including those that contain alphabetic characters. This ensures that every possible color, whether it uses digits or letters, is included.

Don’t forget to wrap the Math.random() method inside Math.floor() to ensure you get whole numbers and avoid decimal values.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. Converting Number to hexadecimal String

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

Now we need to convert the number into a hexadecimal string, which can be easily done using the toString(16) method.

Simply use the toString(16) method on the random number and pass 16 it as the argument to convert it to a hexadecimal string.

This method ensures that the resulting code includes only digits and letters from 0 to F, without any characters beyond F.

Also Read: Google Analytics Tracking Code in Next.js [Set up Guide]

3. Add padStart Method

Our function is almost ready. However, there's a potential issue: sometimes the generated hex color code might be only 5 characters long instead of 6.

If the function returns a 5-character hex color code, it won't be valid. To fix this and ensure that we always get a 6-character hex color code, we need to add the padStart method to the code.

The padStart(6, '0') method will ensure that the color code is always a 6-digit code by adding leading zeros if necessary.

For example, if the hex code is A9A9A and contains only five characters, the padStart(6, '0') method will add a leading 0 to make it a six-digit color code, resulting in 0A9A9A. This ensures that the function always returns a properly formatted hex color code with exactly six characters.

4. Return the Generated Hex Code

The final step is to return the generated random hex color code so that it can be easily used wherever needed.

I want to use a template string to wrap the color code and add # at the beginning, so I don’t have to add # manually every time I use this function.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

Conclusion

When I first created a random hex color generator in JavaScript, it only produced dark or dull colors because it didn't include any alphabetic characters.

After making some changes to the code, I finally achieved the desired result. I also hope this post has saved you time in creating a similar function.

Share this post with your friends who are looking for a new project or want to build something using JavaScript!

Also Read: How to Disable HTML Code without Deleting [3 Methods]

Add Sitemap in Next.js 14 [Static & Dynamic]

Faruk Sardar — Tue, 21 May 2024 18:50:59 +0000

A sitemap is like a map for your website. It helps search engines find all the pages on your site. If you have lots of pages, a sitemap makes it easier for search engines to find and show them in search results.

In this post, I'll explain how to make a Sitemap from scratch using Next.js.

How to Add Sitemap in Next js
Setting up the Next.js. Project

Before we dive into the code, let's ensure we have everything set up:

Install the latest version of Next.js or the minimum version of Next.js 13.

Once the project is set up now let's understand the Code.

Adding Sitemap in Nextjs

1. Create a Sitemap.js File in the App Folder

The first thing is you need to create a new sitemap.js file in your Next.js App folder.

If you using TypeScript then you can add a sitemap.ts to avoid getting bugs during development.

In this file, we need to return a function and the name of the function shows as a sitemap, here is a proper example mentioned below:

export default async function sitemap() {

return //More code here

}

2. Use route details in an Array for Static site

For those of you who have a static website and not using a dynamic route then make sure you added all the route details in an array of objects.

Here is a good example of how can you show the details the route details.

  const tools: PostType[] = [
    { url: "dummy-post-1", _updatedAt: "2024-03-21T14:59:28Z" },
    { url: "dummy-post-2", _updatedAt: "2024-03-23T14:59:28Z" },
    { url: "dummy-post-3", _updatedAt: "2024-03-24T14:59:28Z" },
    { url: "dummy-post-4", _updatedAt: "2024-03-25T14:59:28Z" },
    { url: "dummy-post-5", _updatedAt: "2024-03-27T14:59:28Z" },
    { url: "dummy-post-6", _updatedAt: "2024-03-28T14:59:28Z" },
  ];

Remember to also add the publish date of the page according to the route as shown in the above example.

3. Map through the Stored Array details and return it

Now we need to map through this stored array data and return it.

If you're fetching data from an API, you don't necessarily need to store all the details in an array of objects.

Instead, you can directly map through the details after fetching the data in your app.

 export default async function sitemap() {

  const routes = [
    { url: "dummy-post-1", _updatedAt: "2024-03-21T14:59:28Z" },
    { url: "dummy-post-2", _updatedAt: "2024-03-23T14:59:28Z" },
    { url: "dummy-post-3", _updatedAt: "2024-03-24T14:59:28Z" },
    { url: "dummy-post-4", _updatedAt: "2024-03-25T14:59:28Z" },
    { url: "dummy-post-5", _updatedAt: "2024-03-27T14:59:28Z" },
    { url: "dummy-post-6", _updatedAt: "2024-03-28T14:59:28Z" },
  ];


return routes.map((route) => ({
    url: `https://localhost:3000/${route.url}`,
    lastModified: route._updatedAt,
  }));

  }

In the example above, I made an array called "tools" storing URL data and update times.

Then, I changed the names a bit. The URL data is now stored in a property called "URL" and "_updatedAt" is now called "lastModified."

So, now the function returns data where each object has a "URL" property containing the website URL and a "lastModified" property showing the last time the data was updated.

Add your domain name instead of localhost:3000 in production.

Now if you save the file and visit http://localhost:3000/sitemap.xml you will see that Next.js has successfully generated a sitemap for us.

I hope I can explain to you how to add a sitemap to Next.js projects.

If you're using versions 13, 14, or the latest one, this method will work for you.

Check out my other articles from my blog, SingleSyntax.com, to delve into more about Next.js and other frontend tips. Make sure to visit the blog for more insightful content!

10 Tailwind CSS Classes Save Your Time

Faruk Sardar — Mon, 20 May 2024 15:43:52 +0000

Nowadays, developers avoid vanilla CSS and move on to Tailwind CSS because it saves time while building projects.

If you are also one of the developers who use Tailwind CSS to create web apps and sites then you should know these 10 Tailwind CSS names. because it will save you a lot of time.

Before moving I move on I want to mention that I'm using Next.js for a tutorial but you can use any framework you like such as normal React, Angular, Vue.js, or others

1. Prose

The first and my favorite class is Prose and it is because prose helps me to style all the HTML elements that I receive from headless CMS at once.

Still, confused? Let me give you an example, check out below:

import React from "react";

export default function Page() {
  return (
    <main>
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum?</h1>
      <p>
        Consectetur adipisicing elit. Eveniet reprehenderit voluptatum velit
        accusamus provident rem earum, quod quia!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil neque
        deleniti eos, veritatis explicabo est modi officiis, at officia minima
        totam natus unde sed consequuntur.
      </p>
      <p>
        Corrupti optio natus aliquid eveniet odit, sit culpa possimus, cum, quos
        fuga voluptates itaque distinctio sint nostrum?
      </p>
      <p>
        Assumenda ipsum facilis doloribus laboriosam consectetur distinctio
        autem, enim odit consequuntur veniam, Commodi, officiis! Inventore?
      </p>
      <h2>Harum dolore saepe?</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>Molestias ipsum tenetur beatae</li>
        <li>quo natus, vitae quaerat</li>
        <li>sit rem enim delectus.</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quis
        aspernatur recusandae omnis architecto rem ipsam quia.
      </p>
      <blockquote>
        Laborum reiciendis, dolor ab excepturi unde alias veritatis mollitia
        blanditiis, tempora error at.
      </blockquote>
    </main>
  );
}

Without prose class

If I had to style the above HTML then it would take me a good amount of time, Because I have to style every HTML tag.

But now with the prose class name, I can style them all at once,

import React from "react";

export default function Page() {
  return (
    <main className="max-w-5xl mx-auto prose"> //Added "prose" classname
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum?</h1>
      <p>
        Consectetur adipisicing elit. Eveniet reprehenderit voluptatum velit
        accusamus provident rem earum, quod quia!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil neque
        deleniti eos, veritatis explicabo est modi officiis, at officia minima
        totam natus unde sed consequuntur.
      </p>
      <p>
        Corrupti optio natus aliquid eveniet odit, sit culpa possimus, cum, quos
        fuga voluptates itaque distinctio sint nostrum?
      </p>
      <p>
        Assumenda ipsum facilis doloribus laboriosam consectetur distinctio
        autem, enim odit consequuntur veniam, Commodi, officiis! Inventore?
      </p>
      <h2>Harum dolore saepe?</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
        <li>Molestias ipsum tenetur beatae</li>
        <li>quo natus, vitae quaerat</li>
        <li>sit rem enim delectus.</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quis
        aspernatur recusandae omnis architecto rem ipsam quia.
      </p>
      <blockquote>
        Laborum reiciendis, dolor ab excepturi unde alias veritatis mollitia
        blanditiis, tempora error at.
      </blockquote>
    </main>
  );
}

With prose class

To use the Prose class in your project first, you need to download a tailwind plugin that is @tailwindcss/typography this plugin will help us to use all the extra class names along with prose.

npm install -D @tailwindcss/typography

Once the package is downloaded successfully, you must

add the package to your tailwind.config file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [
  require("@tailwindcss/typography") //Add package here
  ],
};

Now you are all set, you can use the prose class name on the container that contains all the different kinds of HTML tags and Tailwind will style it without requiring you to style each and every HTML element one by one.

Overwriting Prose Classes

If you don't like some styles then you can overwrite them using the different prose classes, here are some classes you can use to overwrite default styling.

prose-h1:
prose-h2: (and so on)
prose-p:
prose-a:
prose-blockquote:
prose-strong:
prose-code:
prose-em:
and more...

2. Size

Now you could save on writing the number of classes for height and width if both the values are the same.

Let's say you want a div container and want to give it a height of h-20 and a width of w-20.

But now you can use size class to provide the height and width at once.

//Before
      <div>
        <Image
        src="myImage.png"
        className="w-20 h-20" //without size class
        />
      </div>

//After
      <div>
        <Image
        src="myImage.png"
        className="size-20" //with size class
        />
      </div>

Make sure to use the size class name wherever you require to add a height and width with the same values.

3. Group

If you are new to Tailwind then you may never heard of group the class,

Most of the time we need to apply styling to a children's element when a user is interacting with a parent element.

For example, changing the text color when the user is hovering over the parent container.

To use the Group class first you need to apply the group class to the parent, like this:

<div className="group">
    <h1>I hope you are having a good day</h1>
</div>

Now, make the children also change. As I showed before, turn the text color to green when you put the mouse over the parent.

<div className="group">
    <h1 className="group-hover:text-green-500">I hope you are having a good day</h1>
</div>

You can use lots of different Tailwind classes, not just for changing text color, but also to create various effects.

4. Animate

It is one of the most helpful tailwind classes that definitely saves you time while creating animation is animate class.

For those of you who don't know that tailwind also has a class name for animations.

There are a total of 5 animation classes you can use, here is the list:

animate-spin
animate-ping
animate-pulse
animate-bounce
animate- none

Each has different effects, and I'm sure you can use them in so many different ways.

5. Divide

The divide is another time saver class name and you can use this class for adding borders to children's elements.

Let's say you save multiple children in a container and you want to add border rights to all the children,

To do that you need to use divide-x and for thicker borders use divide-x-2, here is the result of this class.

 <main>
      <div className="flex m-10 divide-x"> //thin border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-x-2"> //thick border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

The good thing is that you can also able to change the border color similar to the text color,

To do that you need to use the divide-red-500 class name, instead of red you can specify any color you want that tailwind supports.

 <main>
      <div className="flex m-10 divide-x-2 divide-red-500">
        {" "}
        //Red border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-x-2 divide-blue-500">
        {" "}
        //Blue border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

You can also add borders in "y" direction by changing the class, like this:

    <main>
      <div className="flex m-10 divide-y"> //Adding border at top and bottom
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 divide-y-2"> //more thicker border
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

6. Space

Space class is very similar to the divide class name, instead of the border we get spaces between the border.

If you used gap with the combination of flex or grid class then you may know that you can add spacing with the children.

But if you want equal space between the children without using Flexbox or Gird then you can now use space class.

Here is an example of this class:

<main>
      <div className="flex m-10 space-x-6"> //Adding little space
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
      <div className="flex m-10 space-x-12"> //Adding more space
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
        <p className="p-6">Lorem ipsum dolor sit amet.</p>
      </div>
    </main>

Changing the class from x to y could add the spacing at the vertical position.

7. Sr-only

Sr-only has a very specific use case and you may not use it very often but I'm sure you'll get into a situation where you are required to use this class.

What the sr-only class does is, when you apply this class your content will become hidden from the screen but not from the DOM

This class will apply multiple CSS classes to make the content for the users but not for search engine bots.

A best use case of this class is on the tooltip, you can hide a label using this class and make it visible again when a user hovers over the element.

8. Accent

For changing the color of the default form elements you could use the accent-red-500 class

Just add the class name on the form tag or the individual tags according to your requirements.

Here is an example with code:

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
        <span className="">Human:</span>
        <label htmlFor="yes">
          Yes
          <input type="radio" id="yes" name="human" />
        </label>

        <label htmlFor="no">
          No
          <input type="radio" id="no" name="human" />
        </label>
      </form>
    </main>
  );
}

9. Caret

Caret has a very small use case like changing the cursor color when a user types in an input box.

Add caret class along with the color name to change the cursor, see an example I mentioned below:

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
      //caret class
        <textarea className="border border-violet-500 rounded-xl w-60 h-32 p-3 caret-violet-500 focus:outline-none"></textarea>
      </form>
    </main>
  );
}

10. Ring

Many developers hate to use borders on an element but now the tailwind team has created a solution for this.

Instead of using the border class now, you can use the ring class name, what this class name does is add a box shadow without any blur giving an illusion of a border.

I have added an example below where I use ring class on a textarea It looks like a border but it does not.

export default function Page() {
  return (
    <main>
      <form className="m-10 flex gap-4 accent-red-500">
        <textarea className="ring ring-violet-500 rounded-xl w-60 h-32 p-3 caret-violet-500 focus:outline-none"></textarea>
      </form>
    </main>
  );
}

And those are the 10 Tailwind CSS class names that many people may not be familiar with.

I hope you find some new and interesting classes in this post that you haven't tried before.

I regularly post similar articles on my blog, SingleSyntax.com.

Make sure to share this post with your developer friends so they can also save time by utilizing these classes.

Create SVG Images using HTML Tags and Attributes!

Faruk Sardar — Fri, 17 May 2024 07:15:18 +0000

If you've used SVG images while building a website or in any project, you might wonder why the SVG image doesn't lose quality when you zoom in.

In this post, I'll answer all your questions and By the end, you'll be able to write your own SVG code to create an SVG image.

What you will learn in this post:

How an SVG image works?
How to create an SVG image using code?

Understanding SVG and How It Works

SVG also known as "Scalable Vector Graphics", is an XML-based format for describing two-dimensional vector graphics.

Unlike normal images such as jpg, png, etc, which are made up of pixels, SVG graphics are composed of paths, shapes, and text that are defined mathematically.

Because of this SVG images can be scaled to any size without losing quality, making them ideal for responsive web design and high-resolution displays.

Creating Shapes in SVG

Before creating any kind of shape it is important to create an SVG and give it a width and height.

Rect (Rectangle)

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="red" />
</svg>

In the above example, I have created a rectangle using a rect tag inside an SVG.

The x and y attributes define the position of elements within the coordinate system of the SVG.

In our case, the rectangle will be positioned 10px from the left (x) and 10px from the top (y).

Using the width and height attributes you can define the width and the height of the Rectangle.

Finally to make the Rectangle a little better use the fill attribute to give it a fill color.

The Final output will look something like this:

Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#3b82f6" />
</svg>

Similarly, you can create a circle in SVG, but this time the attribute will be different.

instead of x and y we use cx and cy to set the position of a circle.

Using the r attribute we can set the radius of a circle, in the example r has a value of 50 which means the radius of the circle will be 50px

Finally using the fill attribute we can set a fill color, this time I used a HEX color code to show you we can use HEX colors as well.

Here is the final output of the circle:

Line
Now let's see how to create a line using line tag, Yes you can also draw lines in SVG with the help of line tag.

The process of creating a line is same as Rectangle and Circle, but there are some additional attributes you need to know.

Here is an example of SVG Line tag:

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="3" />
</svg>

In the above example, I have created a line with a stroke color of black and a stroke width of 3.

Now, to draw a line, you need to use four attributes: x1, x2, y1, y2.

These attributes help us define where we want the line to be.

In my case, I drew a line positioned 50px from x1 and 50px from y1 for the starting point of the line. To define where the line should end, you need to use x2 and y2.

As mentioned, the end of the line should be 150px from x2 and 150px from y2.

Path
We can also create complex images using the path tag available in SVG.

The <path> tag doesn't rely on x or y for positioning, Instead, it uses the d attribute, which stands for data, to define the shape and position.

The d attribute specifies the path data, which consists of a series of commands to move to specific points and draw lines between them to create the star shape.

Here is an example where I create a star using the path tag:

<svg width="200" height="200">
  <path d="M 100 10 L 123.09 70.45 L 190.36 77.36 L 142.14 123.09 L 155.90 190.36 L 100 150.18 L 44.10 190.36 L 57.86 123.09 L 9.64 77.36 L 76.91 70.45 Z" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

We can also use fill attribute to sets the fill color of the star to yellow.

The stroke attribute sets the stroke color of the star to black.

The stroke-width attribute sets the width of the stroke to 2 pixels.

Now you know how a SVG image works, you can upgrade your skills by learning D3.js which is a library to create Data visualization charts using SVG.

Previously on Newbiecoding Blog, I mentioned the top 6 methods to master in D3.js for beginners.

If you have any questions about SVG, feel free to mention them in the comments section. I'll be happy to answer them.

How to Change File Permissions in Linux?

Faruk Sardar — Thu, 16 May 2024 17:15:51 +0000

If you recently started using Linux or want to deploy your project to the WPS server then having a basic knowledge about Linux File Permissions is a good thing.

Sometimes, you might not want others to open or modify your files on your Linux computer or server.

Linux has a handy built-in tool for this called CHMOD, short for "change mode."

The CHMOD command lets you change who can read, write, and execute a file. You can decide if it's just the owner, a group of people, or everyone who can do these things with the file.

I have divided this post into three different sections:

Explain the CHMOD codes in a simpler way
How can you run this command on your terminal?
Easy way to calculate CHMOD permission codes

How to read the CHMOD command?

Let's first take a look on what is the meaning of this code by breaking it into small pieces.

The chmod permission code has two different variants a numeric code or symbolic code.

Numeric Code

The numeric code consists of three digits.

Each digit represents the permissions for a specific group of users: owner, group, and others (sometimes called world).

Each digit is the sum of the permissions for that group:

4 stands for read permission.
2 stands for written permission.
1 stands for execute permission.
0 stands for no permission.

Instead of a single permission, you can provide multiple permissions by adding the permission values, here is an example:

If you want to read and write permissions, you add 4 (read) + 2 (write), which gives 6.

If you want to read, write, and execute permissions, you add 4 (read) + 2 (write) + 1 (execute), which gives 7.

This numeric code is shorter but might be harder to understand compared to the symbolic representation, where letters are used to show permissions.

Symbolic code

The length of the symbolic code is longer than the numeric code but many users find it easier to read symbolic code than the numeric code.

The symbolic representation chmod allows users to specify permissions using letters rather than numbers.

It consists of three parts:

who the permission applies to (user, group, others)

the operation to perform (add, remove, set)

and the permission itself (read, write, execute).

Here's a breakdown:

Who:

"u" represents the user/owner.
"g" represents the group.
"o" represents others.
"a" represents all (user, group, and others).

Operation:

"+" adds permission.
"-" removes a permission.
"=" sets the permission explicitly, overriding existing permissions.

Permission:

"r" stands for reading.
"w" stands for write.
"x" stands for execute.

For example:

chmod u+x file.txt: Adds execute permission for the user/owner of the file.

chmod g-w file.txt: Removes written permission for the group.

chmod o=r file.txt: Sets read-only permission for others.

chmod a+rw file.txt: Adds read and write permission for all users.

chmod ug=rwx,o=r file.txt: Sets read, write, and execute permissions for the user/owner and group, and read-only permission for others

How can you run the CHMOD command in the terminal?

To change the current permission of a file or directory (folder) first you need to check the current permission of that file or directory.

ls -l

By running this command into your terminal you can check the current permission of that file.

In my case I have a file called "file.txt" and its current permission is owner can read and write the file, the group can only read it, and others can also only read it.

I want to change it to read and write permissions for the owner, group, and others.

chmod 666 file.txt

By running the above command I can easily do that.

Now you can see the permission is successfully changed.

You can follow the same process to change the permission of a file or directory using symbolic code.

Just replace the number code with a symbol code and it will work the same way.

How to Calculate the CHMOD easily?

In many situations you might get foncused by calculating permission code, the good thing is that there are many tools available on the internet that you can use to calculate the code.

Chmodcalculator.in is the one I use personally and I will recommend it to you, using this tool is free and doesn't require creating an account.

Just visit the site toggle the permission that you want copy the generated code and use it in your terminal to change permission.

I hope I have explained the CHMOD permission in the simplest way possible.

If you still have any questions, please leave a comment, and I'll be happy to answer them.

How to Add All Numbers in An Array JavaScript?

Faruk Sardar — Wed, 15 May 2024 15:06:04 +0000

Many people who are learning JavaScript face problems when they need to sum all the numbers in an array.

The good thing is that there are many ways to Add All Numbers in An Array of JavaScript and I'm going to share the best 3 methods in this post.

Before you start following the tutorial, double-check that all the things in your list that you want to add up are numbers, not words.

Here is an example:

// Array containing numbers in number format
const numberArray = [1, 2, 3, 4, 5, 6]; ✅

// Array containing numbers in string format
const string array = ['1', '2', '3', '4', '5', '6']; ❌

If the numbers in your list are written as words, you have to change them into numbers before doing what I said in my earlier message.

If your Array contains numbers in string format then it will throw an array while following this method.

1. Using Array.reduce() Method (Recommended):

In the first method, I'm going to use the reduce() method on the array to sum the items in the array.

This method will iterate over an array and perform a reduction operation on its elements

Here is how the function works:

function sumArrayWithReduce(arr) {
    return arr.reduce((acc, current) => acc + current, 0);
}

// Example usage:
const numbers = [1, 2, 3, 4, 5];
console.log(sumArrayWithReduce(numbers)); // Output: 15

If you see the sumArrayWithReduce I have passed 0 as the second argument to the reduce() method, this means the first number it will sum is 0 then move on to the second number.

If I do not pass zero then the function adds an extra number which is present in the first item in the array.

You can learn more about reduce() on Mozilla.

2. Using a For Loop:

In the second method, I'm using for loop for adding All Numbers in An Array.

function sumArrayWithForLoop(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

// Example usage:
const numbers = [1, 2, 3, 4, 5];
console.log(sumArrayWithForLoop(numbers)); // Output: 15

First I have created a function and inside the function, I declare a variable and set its value to 0.

Now I have created for loot and set it to run for the length of the array.

The for loop will iterate over the array you provide and add each of the numbers one by one.

3. Using forEach() Method:

You can also use the forEach method instead of the for loop,

The method is the same as the second method the only difference is that forEach will iterate over the array instead of the for loop.

Here's how you can put the code into action.

function sumArrayWithForEach(arr) {
    let sum = 0;
    arr.forEach(num => {
        sum += num;
    });
    return sum;
}

// Example usage:
const numbers = [1, 2, 3, 4, 5];
console.log(sumArrayWithForEach(numbers)); // Output: 15

JavaScript gives you many options for doing the same tasks, and this applies to adding all numbers in an array too.

I suggested an easier method for doing this. Please tell me which one you used in your project among all three options.