Categories
JavaScript

What’s New in ES2022?

The following new fearures be included in ES2022.

String.prototype.replaceAll()

This method replaces all occurrences of a substring within a string with another substring. Prior to this, you had to use regular expressions or iterate through occurrences manually.

To use it, we can write something like:

const str = 'foo bar foo baz';
const newStr = str.replaceAll('foo', 'qux');
console.log(newStr); // Output: 'qux bar qux baz'

Promise.any()

This method returns a single Promise that resolves as soon as any of the provided promises resolves, or rejects if all of the provided promises are rejected.

To use it, we can write something like:

Promise.any([promise1, promise2, promise3])
    .then((value) => {
        console.log(value); // Output: value of the first resolved promise
    })
    .catch((error) => {
        console.error(error); // Output: AggregateError containing errors of all rejected promises
    });

WeakRefs

Weak references allow you to hold references to objects without preventing them from being garbage collected. This can be useful in scenarios where you need to keep track of objects without preventing their natural cleanup.

Numeric Separators: Numeric separators allow you to make numeric literals more readable by inserting underscores (_) between groups of digits.

For example we write

const billion = 1_000_000_000;
const binary = 0b1010_0001_1001_0000;

Promise.allSettled()

This method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.

To use it, we can write something like

Promise.allSettled([promise1, promise2, promise3])
    .then((results) => {
        console.log(results);
    });
Categories
CSS

How to add a one-way transition with CSS?

Sometimes, we want to add a one-way transition with CSS. In this article, we’ll look at how to add a one-way transition with CSS.

In CSS, you can create one-way transitions using the transition property. A one-way transition is typically applied when an element undergoes a change in its style, such as when it’s hovered over or clicked on, and you want to specify how it transitions from one state to another.

Here’s a basic example of how to add a one-way transition using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One-Way Transition</title>
<style>
    /* Define the initial styles for the element */
    .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        transition: width 0.5s ease-out; /* Specify the transition property, duration, and easing */
    }

    /* Define the styles for when the element is hovered over */
    .box:hover {
        width: 200px; /* Change the width on hover */
    }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

In this example we have a .box div element with initial styles (blue background color and 100×100 dimensions).

Next we’ve added a transition on the width property, specifying a duration of 0.5s and an easing function of ease-out. This transition will be applied when the width property changes.

When you hover over the .box element, its width changes to 200px due to the .box:hover selector. The transition specified in the initial .box style is applied here, causing the width to smoothly transition from 100px to 200px.

We can adjust the properties being transitioned, the duration, and the easing function according to your specific needs.

Categories
JavaScript Answers Vue Vue Answers

How to Set Up ESLint and Prettier in Vue.js 3 Projects and Format Code Automatically with Prettier with VS Code?

Sometimes, we want to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

In this article, we’ll look at how to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

First, we install a few packages into our Vue project by running:

npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-prettier

We install the ESLint with plugins for Vue projects.

Then we install extensions by pressing ctrl+shift+p in VS Code and search for ‘Extensions: Install Extension’.

Next, in the extensions search box on the left, we search for Prettier, ESLint, and Vetur and install them by clicking install.

After that, we press ctrl+shift+p in VS Code and search for ‘Preferences: Open Settings (JSON).

And then we paste the following into settings.json:

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "none",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
    "editor.formatOnSave": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "html.format.wrapLineLength": 80,
  "files.insertFinalNewline": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.formatOnType": true
  },
  "extensions.ignoreRecommendations": true,
  "vue.codeActions.savingTimeLimit": 2000
}

to enable auto formatting and linting of Vue projects.

Finally, we create an .eslintrc.js file in the Vue project’s root and add:

module.exports = {
  root: true,
  env: {
    node: true,
    es2022: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

into the file to enable the extensions needed for auto linting and formatting.

Conclusion

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

Categories
CSS

How to select parent element with CSS?

Sometimes, we want to select parent element with CSS.

In this article, we’ll look at how to select parent element with CSS.

How to select parent element with CSS?

To select parent element with CSS, we can use the has pseudo-class.

For instance, we write

li:has(> a.active) {
  /* styles to apply to the li tag */
}

to select the li that has the anchor element that has the active class.

We use > to get the direct children.

Conclusion

To select parent element with CSS, we can use the has pseudo-class.

Categories
CSS

How to remove the space between inline or inline-block elements with CSS?

Sometimes, we want to remove the space between inline or inline-block elements with CSS.

In this article, we’ll look at how to remove the space between inline or inline-block elements with CSS.

How to remove the space between inline or inline-block elements with CSS?

To remove the space between inline or inline-block elements with CSS, we can use flexbox.

For instance, we write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add a p element with 2 spans.

Then we style them by writing

p {
  display: flex;
}

span {
  width: 100px;
  font-size: 30px;
  color: white;
  text-align: center;
}

We make the p element a flex container with display: flex.

This will also remove the space between the child elements, which are the spans.

Then we style the span’s text with by changing the font size, color, and alignment.

Conclusion

To remove the space between inline or inline-block elements with CSS, we can use flexbox.