Tari Ibaba, Author at Coding Beauty

How to Convert Hours and Minutes to Seconds in JavaScript

By Tari Ibaba / Last updated on December 21, 2022

To convert hours and minutes to seconds in JavaScript:

Multiply the hours by 3600 to convert it to seconds.
Multiply the minutes by 60 to convert it to seconds.
Add these seconds to the seconds time value to get the total seconds.

For example:

function toSeconds(hours, minutes, seconds) {
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds(2, 15, 10)); // 8110

console.log(toSeconds(1, 5, 30)); // 3930

We create a reusable toSeconds() function to easily convert the hours and minutes to seconds.

The function is quite easy to understand; 1 hour equals 3600 seconds, so we multiply the hour value by 3600 to get the seconds equivalent. Similarly, 1 minute equals 60 seconds, so we multiply the minute value by 60 to get the seconds equivalent.

After this, we add the equivalent seconds values to the seconds argument to get the total seconds.

We could rewrite the function to accept the time values as named properties of an object, instead of as multiple parameters.

function toSeconds({ h: hours, m: minutes, s: seconds }) {
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds({ h: 2, m: 15, s: 10 })); // 8110

console.log(toSeconds({ h: 1, m: 5, s: 30 })); // 3930

This approach makes it easier to understand the role of each value passed to the function, a

Convert `HH:mm:ss` to seconds in JavaScript

Sometimes the time input to convert to seconds is a string in a time format, like HH:mm:ss. To convert to seconds in this case, we’ll separate the individual time values by the separator (: in this case), cast them each to numbers, and perform the same time conversion steps done in our previous examples.

For example:

function toSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds('02:15:10')); // 8110

console.log(toSeconds('01:05:30')); // 3930

The input string here is in the HH:mm:ss format; the hour, minute, and second values are separated by a colon (:) and are each represented by a minimum of 2 digits.

The String split() method splits a string into an array of substrings separated by a given separator in the original string. We pass a colon as the separator to get an array of the individual time values.

const timeStr = '02:15:10';

console.log(timeStr.split(':')); // [ '02', '15', '10' ]

After getting this array, we use the map() method to transform each time value into a number. The map() method takes a callback and calls it on each element of an array and uses the result to populate a new array. For our scenario, the callback is simply the Number() constructor, so each time value in the array is converted to a number.

console.log(['02', '15', '10'].map(Number)); // [ 2, 15, 10 ]

Note

This:

const [hours, minutes, seconds] = timeStr.split(':').map(Number);

is equivalent to this:

  const [hours, minutes, seconds] = timeStr
    .split(':')
    .map((str) => Number(str));

The second one is longer, but it makes it clear exactly what arguments are passed to the map() callback. In the first one, map() automatically passes 3 arguments to its callback, which could be problematic if the callback returns a different result depending on the number of arguments it receives, for instance, a parseInt() callback.

We then use a destructuring assignment to unpack the number array values into separate hour, minute, and second variables.

const [hour, minute, seconds] = [2, 15, 10];

console.log(hour); // 2

console.log(minute); // 15

console.log(seconds); // 10

After doing this, we perform the same multiplication and addition we did in the first example, to convert the hours and minutes to seconds and get the total seconds.

How to Filter Duplicate Objects From an Array in JavaScript

By Tari Ibaba / Last updated on December 15, 2022

1. Only keep first object in array with property value

To filter duplicate objects from an array by a property in JavaScript, use the filter() method to filter out elements that are not the first in the array having the property value.

For example:

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex((item) => item.location === obj.location) === index
);

/*
   [
     { name: 'John', location: 'Los Angeles' },
     { name: 'Kate', location: 'New York' }
   ]
 */
console.log(unique);

The Array filter() tests each element in an array against a condition specified by a callback function, and creates a new array filled with elements that pass the test. It doesn’t modify the original array.

const arr = [1, 2, 3, 4];

const filtered = arr.filter((num) => num > 2);
console.log(filtered); // [ 3, 4 ]

The Array findIndex() method searches through elements in an array and returns the index of the first one that passes a test, specified by the callback function passed to it. We use it to find the first array element with the same property value as the object filter() is currently testing.

In our example, the filter() condition for the object is that its array index be the same as the result of findIndex(). If this condition is true, it will mean that the object is the first array element with the property value. If it’s false, it’ll mean that there’s already an array item with that property value, so the object is a duplicate and shouldn’t be included in the result.

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

// true - first object with location of New York
console.log(1 === arr.findIndex((obj) => obj.location === 'New York'));

// false - will not be included in result
console.log(2 === arr.findIndex((obj) => obj.location === 'New York'));

Filter duplicate objects from array by multiple properties

Depending on your scenario, you may want an object to be considered a duplicate only if it has two or more properties that have the same value – multiple property values that are the same.

For that case, we’ll use filter() and findIndex() as before, but we’ll add extra comparisons between filter()‘s object and findIndex()‘s object for all the properties.

For example:

const arr = [
  {
    name: 'Kate',
    location: 'New York'
  },
  {
    name: 'Mike',
    location: 'New York'
  },
  {
    name: 'Kate',
    location: 'New York'
  }
];

const unique = arr.filter(
  (obj, index) =>
    arr.findIndex(
      (item) => item.location === obj.location && item.name === obj.name
    ) === index
)

/*
   [
      { name: 'Kate', location: 'New York' },
      { name: 'Mike', location: 'New York' }
   ]
 */
console.log(unique);

2. Exclude duplicates from `unique` array

Here’s another way to filter duplicate objects from an array in JavaScript:

Create an empty unique array that will store the unique objects.
Loop through the objects in the array.
For each object, add it to the unique array if it isn’t a duplicate. Otherwise, ignore it.

For example:

const arr = [
  {
    name: 'John',
    location: 'Los Angeles',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  const isDuplicate = unique.find((obj) => obj.location === item.location);
  if (!isDuplicate) {
    unique.push(item);
  }
}

/*
   [
    { name: 'John', location: 'Los Angeles' },
    { name: 'Kate', location: 'New York' }
  ]
*/
console.log(unique);

We use the for...of loop to iterate over the array and perform an action for each object.

For each object, we use the find() method to check if it already exists in the unique array. Array find() searches for the first object in an array that passes a specified test, similar to findIndex(), but it returns the object itself instead of its array index.

const nums = [2, 5, 8, 13, 19];

const doubleDigit = nums.find((num) => num > 9);

console.log(doubleDigit); // 13

If it’s not in the unique array, we simply add it with the push() method.

This method is not a one-liner like the first one, but you may find it easier to understand. It seems like the natural way you would go about removing duplicate items from a list as a human.

Filter duplicate objects from array by multiple properties

Like in the previous method, if multiple properties are used to determine if an object is a duplicate, you can simply add more checks for the properties – this time in the find() method:

const arr = [
  {
    name: 'Kate',
    location: 'New York',
  },
  {
    name: 'Mike',
    location: 'New York',
  },
  {
    name: 'Kate',
    location: 'New York',
  },
];

const unique = [];
for (const item of arr) {
  // 👇 "name" and "location" used for duplicate check
  const duplicate = unique.find(
    (obj) => obj.location === item.location && obj.name === item.name
  );
  if (!duplicate) {
    unique.push(item);
  }
}

/*
  [
    { name: 'Kate', location: 'New York' },
    { name: 'Mike', location: 'New York' }
  ]
 */
console.log(unique);

How to Check if a Checkbox is Checked in React

By Tari Ibaba / Last updated on December 15, 2022

To check if a checkbox is checked in React:

Create a boolean state variable to store the value of the checkbox.
Set an onChange event listener on the input checkbox.
In the listener, use the event object’s target.checked property to check if the checkbox is checked.
Store the checked value in a state variable to be able to check whether the checkbox is checked from outside the event listener.

import { useState } from 'react';

export default function App() {

  const [agreement, setAgreement] = useState(false);

  const handleChange = (event) => {
    setAgreement(event.target.checked);
  }

  return (
    <div>
      <div id="app">
        <input
          type="checkbox"
          name="agreement"
          onChange={handleChange}
        />

        <label for="agreement">
          I agree to the terms and conditions
        </label>

        <br /><br />

        <button disabled={!agreement}>Continue</button>
      </div>
    </div>
  );
}

The button is disabled depending on the checkbox's checked value. — The button is disabled depending on the checkbox’s checked value.

The event object’s target property represents the checkbox input element; the value of its checked property indicates whether the checkbox is checked or not.

The event object is passed to the onChange listener, which will be invoked whenever the checkbox is checked or unchecked.

We use the useState React hook to store the checkbox’s checked state. useState returns an array of two values; the first is a variable that stores the state, and the second is a function that updates the state when it is called.

So every time the checkbox is checked or unchecked, the agreement state variable will be automatically toggled to true or false.

We set the button’s disabled prop to the negation of agreement to disable and enable it when agreement is true and false respectively.

Check if checkbox is checked with ref

Instead of controlling the checkbox’s checked value with React state, we can create an uncontrolled checkbox and check whether it is checked with a ref.

For example:

import { useState, useRef } from 'react';

export default function App() {
  const [message, setMessage] = useState('');
  const checkbox = useRef();

  const handleClick = () => {
    if (checkbox.current.checked) {
      setMessage('You know JS');
    } else {
      setMessage("You don't know JS");
    }
  }

  return (
    <div>
      <div id="app">
        <input
          type="checkbox"
          name="js"
          ref={checkbox}
        />

        <label for="js"> JavaScript </label>
        <br />
        <button onClick={handleClick}>Done</button>
        <p>{message}</p>
      </div>
    </div >
  );
}

A message depending on the checkbox's checked value is displayed. — A message depending on the checkbox’s checked value is displayed.

The data in a controlled input is handled by React state, but for uncontrolled inputs, it is handled by the DOM itself. This is why the input checkbox in the example above doesn’t have a value prop or onChange event handler set. Instead, we check if the checkbox is checked with a React ref. The DOM updates the checked value when the user toggles the checkbox.

We create a ref object with the useRef hook and assign it to the ref prop of the checkbox input. Doing this sets the current property of the ref object to the DOM object that represents the checkbox.

useRef returns a mutable object that maintains its value when a component updates. Also, modifying the value of this object’s current property doesn’t cause a re-render. This is unlike the setState update function return from the useState hooks.

Although the React documentation recommends using controlled components, uncontrolled components offer some advantages. You might prefer them if the form is very simple and doesn’t need instant validation, and values only need to be accessed when the form is submitted.

How to Round a Number to 2 Decimal Places in JavaScript

By Tari Ibaba / Last updated on December 11, 2022

To round a number to 2 decimal places in JavaScript, call the toFixed() method on the number, i.e., num.toFixed(2). toFixed() will round and format the number to 2 decimal places.

For example:

const num = 5.3281;

const result = num.toFixed(2);

console.log(result); // 5.33

const num2 = 3.1417

const result2 = num2.toFixed(2);

console.log(result2); // 3.14

The toFixed() method takes a number F and returns a string representation of a number with F number of digits after the decimal points. F here is determined by the first argument passed to toFixed(), the fractionDigits argument.

const num = 5.3281;

console.log(num.toFixed(0)); // 5

console.log(num.toFixed(1)); // 5.3

console.log(num.toFixed(2)); // 5.33

console.log(num.toFixed(3)); // 5.328

console.log(num.toFixed(4)); // 5.3281

console.log(num.toFixed(5)); // 5.32810

Parse result of `toFixed()` to number

Remember, toFixed() returns a string representation:

const num = 5.3281;

const result = num.toFixed(2);

console.log(result); // 5.33

console.log(typeof result); // string

But we can always convert the result to a number with the Number() constructor:

const num = 5.3281;

const result = Number(num.toFixed(2));

console.log(result); // 5.33

console.log(typeof result); // number

If the string has trailing zeroes, they will be removed in the conversion:

const num = 9.999999;

const strResult = num.toFixed(2);

const result = Number(strResult);

console.log(strResult); //10.00

console.log(result); // 10

The trailing zeros after the decimal point don’t change the value of a number, so 10.00 is the same as 10 or 10.00000000

console.log(10.00 === 10); // true

console.log(10.00000000 == 10); // true

Round decimal string to 2 decimal places

Sometimes the input might be stored as a string. In this case, we’ll first need to convert the number to a float with the parseFloat() function before using toFixed() to round it to 2 decimal places.

For example:

const numStr = '17.23593';

// 👇 convert string to float with parseFloat()
const num = parseFloat(numStr);

const result = num.toFixed(2); // 17.24

console.log(result);

Not all decimal numbers can be represented precisely in binary, so there are some rounding errors in JavaScript’s floating-point number system. For example:

console.log(44.85 * 0.1); // 4.485

console.log(45.85 * 0.1); // 4.585

console.log(46.85 * 0.1); // 4.6850000000000005 (?)

In this example, 46.85 x 0.1 equals 4.6850000000000005 because 46.85 can’t be accurately represented in binary floating-point format.

console.log((1.415).toFixed(2)); // 1.42

console.log((1.215).toFixed(2)); // 1.22

console.log((1.015).toFixed(2)); // 1.01 (?)

Like in the first one, here 1.015 is rounded down to 2 decimal places as 1.01 instead of 1.02, because 1.015 also can’t be represented accurately in the binary number system.

One of the most popular examples of this flaw is the classic 0.1 + 0.2:

console.log(0.1 + 0.2 === 0.3); // false

console.log(0.1 + 0.2); // 0.30000000000000004

You can find this and more of other interesting JavaScript quirks in our Crazy JS Book.

How to Remove a Class From All Elements in JavaScript

By Tari Ibaba / Last updated on January 18, 2023

To remove a class from all HTML DOM elements with JavaScript:

Get a list of all the elements in the DOM with document.querySelectorAll('*').
Iterate over the list with forEach().
For each element, call classList.remove(class) to remove the class from each element.

i.e.:

const allElements = document.querySelectorAll('*');

// const allChildElementsOfParentWithClass = document.querySelectorAll('.class *');

// const allChildElementsOfParentWithId = document.querySelectorAll('#id *');

// const allChildElementsOfParentWithTag = document.querySelectorAll('tag *');

allElements.forEach((element) => {
  element.classList.remove('big');
});

For example:

<p class="big bold text">Coding</p>
<p class="big bold text">Beauty</p>

<div class="container">
  <p class="big bold text">Dev</p>

  <button class="big btn">Visit</button>
</div>

<br />

<button id="remove">Remove class</button>

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.5em;
}

.text {
  font-family: Arial;
}

.btn {
  color: white;
  background-color: blue;
}

const removeBtn = document.getElementById('remove');

removeBtn.addEventListener('click', () => {
  const elements = document.querySelectorAll('*');

  elements.forEach((element) => {
    element.classList.remove('big');
  });
});

This will be the HTML after the button is clicked:

<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>

<div>
  <p class="bold text">Dev</p>

  <button class="btn">Visit</button>
</div>

<br />

<button id="remove">Remove class</button>

The classes are removed from the element when the button is clicked.

We use the document.querySelectorAll() method to select all DOM elements.

We iterate over the elements in the list object with the forEach() method. This forEach() method works similarly to Array forEach().

`classList.remove()` method

We use the classList.remove() method to remove a class from the elements. You can remove multiple classes by passing more arguments to remove().

const elements = document.querySelectorAll('*');

elements.forEach((element) => {
  element.classList.remove('big', 'bold');
});

If any of the classes passed to remove() doesn’t exist on the element, remove() will ignore it, instead of throwing an error.

Remove class from all children elements of element

The previous example works for removing a class from every single element in the DOM. What if you want to remove all elements that are children of a specific DOM element, for instance, just children of the .container element in our example?

To do this, just prefix the * with the element’s selector and separate them with a space. I mean:

// Remove class from all children elements of .container div
const elements = document.querySelectorAll('.container *');

elements.forEach((element) => {
  element.classList.remove('big');
});

Add class to all elements

Just like the classList.remove() method removes one or more classes from an element, the classList.add() method adds one or more classes to an element. This means that we can use it in the forEach() method to remove a class from all DOM elements:

const elements = document.querySelectorAll('.canvas *');

elements.forEach((element) => {
  element.classList.add('clickable', 'stylable');
});

How to Get the Window’s Width on Resize in React

By Tari Ibaba / Last updated on December 10, 2022

The get the width of the browser window on resize in React, add a resize event listener to the window object, then access the innerWidth property in the listener.

For example:

import { useState, useEffect } from 'react';

export default function App() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

  return (
    <div>
      <h2>Width: {windowWidth}</h2>
    </div>
  );
}

The text is updated with the width of the window when it is resized.

The innerWidth property returns the interior width of the window in pixels, including the width of the vertical scrollbar, if it is present.

The resize event is fired whenever the width or height of the window/document view changes.

We use the useState React hook to create a state variable that will update whenever the width of the window changes.

The useState hook returns an array of two values. The first is a variable that stores the state, and the second is a function that updates the state when it is called.

The useEffect hook is used to perform an action when a component first renders, and when one or more specified dependencies change. In our example, the action is to add the event listener for the resize hook with the addEventListener() method.

We pass an empty dependencies array to useEffect, so that it is called only once in the component’s lifetime, and the resize event listener is only registered once – when the component first renders.

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

In the resize event listener, we update the state variable with the new window width.

Note: useEffect‘s cleanup function runs after every re-render, not only when the component unmounts. This prevents memory leaks that happen when an observable prop changes value without the observers in the component unsubscribing from the previous observable value.

Get window height on resize

We can do a similar thing to get the window’s height on resize, but we’ll use the window object’s innerHeight property instead in the resize event listener:

import { useState, useEffect } from 'react';

export default function App() {
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowHeight(window.innerHeight);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  });

  return (
    <div>
      <h2>Height: {windowHeight}</h2>
    </div>
  );
}

The text is updated with the height of the window when it is resized.

innerHeight property returns the interior height of the window in pixels, including the height of the horizontal scrollbar, if it is present.

Stop autosaving your code

By Tari Ibaba / Last updated on March 30, 2023

Autosave has grown in popularity recently and become the default for many developers and teams, a must-have feature for various code editors. Apps like Visual Studio stubbornly refuse to fully provide the feature, and others make it optional. WebStorm, PHPStorm, and other JetBrains products have it enabled by default; for VSCode, you have to turn it on if you want it.

So obviously, we have two opposing views on the value of autosave because even though it can be highly beneficial, it has its downsides. In this article, we’ll look at both sides of the autosave divide, good causes for turning it off and good causes not to.

Why you should stop autosaving your code

First, some reasons to think twice before enabling autosave in your code editor:

1. Higher and wasted resource usage

When using tools that perform an expensive action any time the file is changed and saved, like build watchers, continuous testing tools, FTP client file syncers, etc, turning on autosave will make these actions much more often. They will also happen when there are errors in the file, and when you make a tiny change. It might instead be preferable for these tools to run only when they need to; when you reach a point where you really want to see the results of your changes.

With greater CPU and memory usage comes lower battery usage and more heat from higher CPU temperature. Admittedly, this will continue to become less and less of an issue as computers increase in processing power, memory capacity, and battery life across the board. But depending on your particular situation, you might want to conserve these things as much as possible.

2. Harder to recover from unexpected errors

With autosave enabled, any single change you make to your code file is written to disk, whether these changes leave your file in a valid state or not. This makes it harder to recover from unwanted changes.

What if you make an unintended and possibly buggy change, maybe from temporarily trying something out, and then close the file accidentally or unknowingly (autosave makes this more likely to happen)? With your Undo history wiped out, it will be harder to recover the previous working version of the file. You might even forget how the code used to look before the change, and then have to expend some mental effort to take the code back to what it was.

Of course, using version control tools like Git and Mercurial significantly decrease the chances of this happening. Still, the previous working version of the file you would want to recover could be one with uncommitted changes, not available from version control, especially if you don’t commit very frequently or you have a commit scheduling determined by more than just the code working after small changes, e.g., committing when a mini milestone is reached, committing after every successful build, etc.

So if you want to continue enjoying the benefits of auto-save while minimizing the possibility of this issue occurring, it’s best if you always use source control and have a frequent commit schedule.

3. No auto-formatting on save

Many IDEs and text editors have a feature that automatically formats your code, so you can focus on the task at hand. For example, VSCode has built-in auto-formatting functionality, and also allows extensions to be written to provide more advanced or opinionated auto-formatters for various languages and file extensions.

These editors typically provide an option to format the file when it is saved. For manual saving, this makes sense, as usually you Ctrl/Cmd + S after making a small working change to a file and stop typing. This seems like a great point for formatting, so it’s a great idea to combine it with the saving action so there’s no need to think about it.

However, this feature isn’t very compatible with auto-save, and that’s why editors/IDEs like WebStorm and VSCode do not format your code for you on auto-save (you can still press Ctrl (Cmd) + S for it to happen, but isn’t one of the reasons for enabling auto-save to avoid this over-used keyboard shortcut?).

For one, it would probably be annoying for the cursor to change position due to auto-formatting as you’re typing. And then, there’s also the thing we already talked about earlier – the file won’t always be syntactically valid after an auto-save, and the auto-formatter will fail.

There is one way though, to have auto-formatting while still leaving auto save turned on, and that is enabling auto-formatting on commit. You can do this using Git pre-commit hooks provided by tools like Prettier and Husky.

Still only happens on commit though, so unless your code is not too messed up or you’re ready to format manually, you’ll have to endure the disorderliness until your next commit (or just press that Ctrl + S).

4. Can be distracting

If you have a tool in your project that performs an action when files are saved and indicate this visually in your editor, i.e, a pop-up notification to indicate recompilation, output in the terminal to indicate rebuilding, etc. With auto-save turned on, it can be a bit distracting for these actions to occur whenever you stop typing for a little while.

For instance, in this demo, notice how the terminal output in VSCode changes wildly from typing in a small bunch of characters:

The terminal output changes wildly from typing in a small bunch of characters.

Text editors have tried to fix this problem (and the resource usage problem too) by adding autosave delays; waiting a certain period of time since the file was last changed before actually committing the changes to disk.

This reduces the frequency at which the save-triggering actions occur and solves the issue to an extent, but it’s a trade-off as lack of immediate saving produces another non-ideal situation.

5. Auto-save is not immediate

The auto-save doesn't happen immediately.

Having an auto-save delay means that your code file will not be saved immediately. This can lead to some problems:

Data loss

Probably the biggest motivator for enabling auto-save is to reduce the likelihood that you’ll lose all the hard work you’ve put into creating code should an unexpected event like a system crash or the forced closing of the application occur. The higher your auto-save delay, the greater the chance of this data loss happening.

VSCode takes this into account; when its auto-save delay is set to 2 or more seconds, it will show the unsaved file indicator for a recently modified file, and the unsaved changes warning dialog if you try to close the file until the delay completes.

On-save action lags

Tools that run on save like build watchers will be held back by the auto-save delay. With manual save, you know that hitting Ctrl + S will make the watcher re-build immediately, but with delayed auto-save, you’ll have to experience the lag between your finishing and the watcher reacting to changes. This could impact the responsiveness of your workflow.

Why you should autosave your code

The reasons above probably won’t be enough to convince many devs to disable autosave. It is a fantastic feature after all. And now let’s look at some of the reasons why it’s so great to have:

1. No more `Ctrl + S` fatigue

Comic on Ctrl + S fatigue. — Image source: CommitStrip

If you use manual save, you probably press this keyboard shortcut hundreds or even thousands of times in a working day. Auto-saving helps you avoid this entirely. Even if you’re very used to it now, once you get used to your files being autosaved, you’ll be hesitant to back to the days of carrying out the ever-present chore of Ctrl + S.

Eradicating the need for Ctrl + S might even lower your chances of suffering from repetitive strain injury, as you no longer have to move your wrists and fingers over and over to type the key combination.

2. Save time and increase productivity

Save time photo. — Save icons created by Kiranshastry – Flaticon

The time you spend pressing the key combination to save a file might not seem like much, but it does add up over time. Turning auto-save on lets you use this time for more productive activities. Of course, if you just switched to auto-save, you’ll have to work on unlearning your Ctrl + S reflex for this to be a benefit to you.

3. Certainty of working with latest changes

Any good automation turns a chore into a background operation you no longer have to think about. This is what auto-save does to saving files; no longer are you unsure of whether you’re working with the most recent version of the file. Build watchers and other on-file-change tools automatically run after the file’s contents are modified, and display output associated with the latest file version.

4. Avoids errors due to file not being saved

This follows from the previous point. Debugging can be a tedious process and it’s not uncommon for developers to forget to save a file when tirelessly hunting for bugs. You probably don’t want to experience the frustration of scrutinizing your code, line after line, wondering how this particular bug can still exist after everything you’ve done.

You might think I’m exaggerating, but it might take up to 15 (20? 30??) minutes before you finally notice the unsaved file indicator. Especially if you’ve been trapped in a cycle of making small changes, saving, seeing the futility of your changes, making more small changes, saving… when you’re finally successful and pressing Ctrl + S is the only issue, you might just assume your change didn’t work, instead of checking for other possible reasons for the reoccurrence of the error.

5. Encourages smaller changes due to triggering errors faster

When a tool performs an action due to a file being saved, the new contents of the file might be invalid and trigger an error. For example, a test case might fail when a continuous testing tool re-runs or there might be a syntax error when a build watcher re-builds.

Since this type of on-file-change action occur more (possibly much more) when files are auto-saved when you type code that causes an error, it will take a shorter time for the action to happen and for you to be notified of the error. You would have made a smaller amount of code changes, which will make it easier to identify the source of the error.

Conclusion

Autosave is an amazing feature with the potential to significantly improve your quality of life as a developer when used properly. Still, it’s not without its disadvantages, and as we saw in this article, enabling or disabling it is a trade-off to live with. Choose auto-format on save and lower CPU usage, or choose to banish Ctrl + S forever and gain the certainty of working with up-to-date files.

What are your views concerning the autosave debate? Please let me know in the comments!

How to Get the Last Part of a URL in JavaScript

By Tari Ibaba / Last updated on December 7, 2022

To get the last part of a URL in JavaScript, use .split('/') to split the URL string into an array of each part, then use .at(-1) to get the last part from the array.

For example:

function getLastPart(url) {
  const parts = url.split('/');
  return parts.at(-1);
}

const url1 = 'https://wp.codingbeautydev.com/blog/javascript-get-last-part-of-url';
console.log(getLastPart(url1)); // javascript-get-last-part-of-url

const url2 = 'https://wp.codingbeautydev.com/blog';
console.log(getLastPart(url2)); // blog

const url3 = 'https://wp.codingbeautydev.com';
console.log(getLastPart(url3)); // wp.codingbeautydev.com

The Array split() method takes a character and splits a string into an array of substrings that were separated by that character in the string. A URL’s segments are separated by the / character, so we pass this character to split() to create an array with each URL segment as an element.

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'wp.codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://wp.codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

After getting this array, we use the Array at() method to get a single element from it. at() is a new ES2022 addition that accepts both positive and negative integers.

Passing negative integers to at() makes it count from the end of the array, so -1 gives the first element from the end (last element) – the last part of the URL.

const urlParts = [
  'https:',
  '',
  'wp.codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url',
];

console.log(urlParts.at(-1)); // javascript-get-last-part-of-url

console.log(urlParts.at(-2)); // blog

console.log(urlParts.at(-3)); // wp.codingbeautydev.com

Remove last part of URL

You might be getting the last part of the URL to remove it from the URL string. If that’s what you want, there’s no need to get the last part of the URL at all – we can remove it easily with the slice() and lastIndexOf() methods.

function removeLastPart(url) {
  return url.slice(0, url.lastIndexOf('/'))
}

const url1 = 'https://wp.codingbeautydev.com/blog/javascript-get-last-part-of-url';

// https://wp.codingbeautydev.com/blog
console.log(removeLastPart(url1));

const url2 = 'https://wp.codingbeautydev.com/blog';

// https://wp.codingbeautydev.com
console.log(removeLastPart(url2));

We use the String lastIndexOf() method to get the position of the last occurrence of the / character, because this is the point just before the last part of the URL starts in the string.

String slice() returns the portion of a string between specified start and end indexes, passed as the first and second arguments respectively. We pass 0 as the first argument so the resulting substring starts from the first character, and we pass the result of lastIndexOf() as the second argument so that the substring ends at the index before the last part of the URL starts in the string.

How to Fix the “Cannot find name ‘console'” Error in TypeScript

By Tari Ibaba / Last updated on December 6, 2022

The “cannot find name ‘console'” error occurs when you try to access the global console object in a TypeScript file. To fix it, install the @types/node NPM package for Node.js environments, or add 'DOM' to the lib array in your tsconfig.json for browser environments.

The "cannot find name 'console'" TypeScript error occuring in VSCode. — The “cannot find name ‘console'” TypeScript error occuring in VSCode.

/*
 * Cannot find name 'console'. Do you need to change your
 * target library? Try changing the 'lib' compiler option
 * to include 'dom'.ts(2584)
 */
console.log('coding beauty');

Install Node.js typings

If your code is running in a Node.js environment, you can fix the “cannot find name ‘console'” error by running the following command at the root of your project directory.

npm i -D @types/node

# Yarn

yarn add --dev @types/node

This should resolve the error for Node.js runtimes.

Add typings to `types` array in `tsconfig.json`

In some cases, this is all you need to fix the error. But if it persists, you might need to add the newly installed typings to the types array of your tsconfig.json file.

Including 'node' string in the tsconfig.json types array will make the Node.js typings visible to the TypeScript compiler.

{
  "compilerOptions": {
    "types": [
      // other types...
      "jest"
    ]
    // other settings...
  }
}

Add `'DOM'` to `lib` array in `tsconfig.json` file

If your code is running in a browser, trying adding a 'DOM' string to the lib array in your tsconfig.json file.

{
  "compilerOptions": {
    "lib": [
      // other libs...
      "ES6",
      "DOM"
    ],
    // other settings...
  },
}

Doing this tells TypeScript that your code is client-side code, and it should provide a set of type definitions for built-in JavaScript APIs found in browser environments.

Restart code editor

If the error persists after trying out all these solutions, restarting your IDE or code editor might help.

Conclusion

To fix the “cannot find name ‘console’ error” in TypeScript, install Node typings if your code runs in Node.js, or add the 'DOM' string to your types array in your tsconfig.json if running in a browser.

How to Get the Number of Months Between Two Dates in JavaScript

By Tari Ibaba / Last updated on December 5, 2022

1. `Date` `getMonth()` method

To get the number of months between two dates in JavaScript:

Use date1.getMonth() - date2.getMonth() to get the month difference between the two dates.
Use date1.getYear() - date2.getYear() to get the difference between the two dates.
Add the month difference to the year difference multiplied by 12, i.e, monthDiff + yearDiff * 12.

For example:

function differenceInMonths(date1, date2) {
  const monthDiff = date1.getMonth() - date2.getMonth();
  const yearDiff = date1.getYear() - date2.getYear();

  return monthDiff + yearDiff * 12;
}

// June 5, 2022
const date1 = new Date('2022-06-05');

// March 17, 2021
const date2 = new Date('2021-03-17');

const difference = differenceInMonths(date1, date2);

console.log(difference); // 15

Our reusable differenceInMonths() function takes two Date objects and returns the difference in months between them. The first argument is the start date, and the second is the end date.

The Date getMonth() method returns a zero-based number that represents the month of a particular date.

Note: “Zero-based” here means that 0 is January, 1 is February, 2 is March, etc.

Apart from subtracting the months, we also need to subtract the years, because the two dates might have different years, and this would of course affect the number of months between them. We use the getFullYear() method to get the years of the dates and subtract them.

The Date getFullYear() method returns a number that represents the year of a particular date.

A year equals 12 months, so after getting the year difference, we multiple it by 12 to get the equivalent months, and add it to the month difference.

2. `date-fns` `differenceInMonths()` function

Alternative we can use the differenceInMonths() function from the date-fns NPM package to quickly get the difference in months between two dates in JavaScript. It works just like our own differenceInMonths() function, taking two Date objects and returning the difference in their months.

import { differenceInMonths } from 'date-fns';

const date1 = new Date('2022-08-10');

const date2 = new Date('2020-02-24');

const difference = differenceInMonths(date1, date2);

console.log(difference); // 29

Tari Ibaba

Convert HH:mm:ss to seconds in JavaScript

1. Only keep first object in array with property value

Filter duplicate objects from array by multiple properties

2. Exclude duplicates from unique array

Filter duplicate objects from array by multiple properties

Check if checkbox is checked with ref

Parse result of toFixed() to number

Round decimal string to 2 decimal places

classList.remove() method

Remove class from all children elements of element

Add class to all elements

Get window height on resize

Why you should stop autosaving your code

1. Higher and wasted resource usage

2. Harder to recover from unexpected errors

3. No auto-formatting on save

4. Can be distracting

5. Auto-save is not immediate

Data loss

On-save action lags

Why you should autosave your code

1. No more Ctrl + S fatigue

2. Save time and increase productivity

3. Certainty of working with latest changes

4. Avoids errors due to file not being saved

5. Encourages smaller changes due to triggering errors faster

Conclusion

Remove last part of URL

Install Node.js typings

Add typings to types array in tsconfig.json

Add 'DOM' to lib array in tsconfig.json file

Restart code editor

Conclusion

1. Date getMonth() method

2. date-fns differenceInMonths() function

Convert `HH:mm:ss` to seconds in JavaScript

2. Exclude duplicates from `unique` array

Parse result of `toFixed()` to number

`classList.remove()` method

1. No more `Ctrl + S` fatigue

Add typings to `types` array in `tsconfig.json`

Add `'DOM'` to `lib` array in `tsconfig.json` file

1. `Date` `getMonth()` method

2. `date-fns` `differenceInMonths()` function