There are multiple ways to filter out duplicates from an array and return only the unique values.

1️⃣ . Using Set 🔥

What is a Set?

Set is a new data object introduced in ES6. A Set is a collection of unique values.

  • The array is converted to Set and all the duplicate elements are automatically removed.
  • The spread syntax ... is used to include all the elements of the Set to a new array.
const arr = ["🌼", "🌴", "🌹", "🌵", "🍄", "🌹", "🌴"];const filteredArr = [ Set(arr)];
console.log(filteredArr); //["🌼", "🌴", "🌹", "🌵", "🍄"]

Convert Set to an Array using Array.from

You can also use Array.from to…

Understanding the fundamentals is priceless. So let’s discuss the fundamental that how Javascript works 🤔

How JavaScript Works? 🤷🏻‍♀

If you are searching for best tutorials on youtube, I am sharing all the programming channels which I have used to grow my skills set as a programmer. Sharing all the youtube channels which is there in my list 😍

1. Coding Garden

Coding Garden is an open, interactive and engaging community where any coder, from beginner to veteran, can learn and grow together.

There are many times when we need to hide the scrollbar from the HTML elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User ,Experience(UX).

Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings

For Chrome:

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
.element::-webkit-scrollbar { width: 0…

A consistent branch naming convention is part of code review best practices.

Validate commit message using Commitlint and husky

Commit message is very important when you work in team. By reading the conventional commit messages, it helps your team to understand what changes have you done and why. Sometime it’s also going to help you when you look back into your codebase 😜 . You will be using Commitlint for validating commit message.

commitlint checks if your commit messages meet the conventional commit format.

Install commitlint:

$ yarn add @commitlint/cli

There are few convention we can use:

  1. @commitlint/config-angular
  2. @commitlint/config-conventional
  3. @commitlint/config-lerna-scopes
  4. @commitlint/config-patternplate

To add config-conventional into project,

Install @commitlint/config-conventional:

$ yarn add @commitlint/config-conventional

Create commitlint.config.js

Numeric Separators give us the ability to separate thousands with an underscore (_) in numeric literals.

How it’s useful❓

It makes our code more informative and readable.

let series = 10000;

Numeric Separators in javascript, enables underscore as a separator in numeric literals to improve readability.


let series = 1_00_00;

You can also use this for binary, octal, and hex numbers.

Binary Number: 👻

let series1 = 0b1010_0101_1001;
console.log(series1); // 2649

Octal Number: 👻

let series2 = 0o2_3_5_7;
console.log(series2); // 1263

Hex Number: 👻

let series3 = 0xA_B_C_D_E;
console.log(series3); // 703710

Few Limitation 🤦‍♀️

Below limitation snippet will throw SyntaxError

  1. More than one underscore in…

String.prototype.replaceAll() replaces all occurrence of a string with another string value.


const newStr = str.replaceAll(regexp|substr, newSubstr|function)

There are few ways to replace all occurrence of a string:

  1. RegEx
  2. split and join
  3. replaceAll

1. RegEx 🙅‍♀️

const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace(/suprabha/g, "suprabha supi");
// "Hi All, suprabhasupi's account is @suprabhasupi"

2. split and join ䷖ ⊞

Using split and join, replace all the occurrence of a string.

const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.split('suprabha').join('suprabhasupi');
// "Hi All, suprabhasupi's account is @suprabhasupi"

Till now, you were able to do full replacement with above two…

CSS border property is used to set the border of an HTML element.

The border property is shorthand for three sub-properties that define the style, color, and width of a border.


border: 1px solid red;


border: border-width border-style color;

border-width 👻

Sets the thickness of the border. Defaults to medium if absent.

border-width: thin | medium | thick;


border-width: border-top-width border-right-width border-bottom-width border-right-width;
border-width: 0 4px 8px 12px;

border-style 🙅‍♀️

Sets the style of the border. Defaults to none if absent.

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

color 🎨

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on💛

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store