Let's explore some common words and phrases used within CSS classes following the BEM guidelines.

## Text

- `title`, `subject`, `heading`, `headline`, `caption`: These classes are used for styling headings.
- `subtitle`: The `subtitle` class is used for subheadings.
- `slogan`: It's often used for styling slogans.
- `lead`, `tagline`: These classes are used for styling lead paragraphs in text.
- `text`: The `text` class is used for styling textual content.
- `desc`: This class is used for styling descriptions or alternative text content.
- `excerpt`: Often used for styling text excerpts, usually before a "Read more..." link.
- `quote`, `blockquote`: These classes are used for styling quotes.
- `snippet`: The `snippet` class is applied to style code examples.
- `link`: This class is used for styling links.
- `copyright`, `copy`: These classes are often used for styling copyright information.

## Images

- `image`, `img`, `picture`, `pic`: These classes are often used for styling images.
- `icon`: This class is used to style icons.
- `logo`: The `logo` class is commonly used for styling logos.
- `userpic`, `avatar`: These classes are used for styling small user images.
- `thumbnail`, `thumb`: These classes are applied to style thumbnail or reduced-size images.

## Lists

- `list`, `items`: These classes are applied for styling lists.
- `item`: The `item` class is used for styling list items.

## Blocks

- `page`: The `page` class represents the root element of a page.
- `header`: It's commonly used for styling the header of a page or an element.
- `footer`: The `footer` class is used for styling page or element footers.
- `section`: This class is applied to style content sections (one of many).
- `main`, `body`: These classes are often used for styling the main content area of a page or an element.
- `content`: The `content` class is used for styling the content within an element.
- `sidebar`: It's used for styling side columns on a page or an element.
- `aside`: This class is applied to style blocks containing additional information.
- `widget`: The `widget` class is used for styling widgets, often found in side columns.

## Layout

- `wrapper`, `wrap`: These classes are used for styling the outer container, typically the top-level structure.
- `inner`: The `inner` class is applied for styling the inner container.
- `container`, `holder`, `box`: These classes are used for styling container elements.
- `grid`: The `grid` class is often applied to style [grid layouts](/blog/react-flexbox-grid), usually containing `row`
  and `col` elements.
- `row`: It's used for styling row containers in a grid.
- `col`, `column`: These classes are used for styling column containers in a grid.

## User Interface Controls

- `button`, `btn`: These classes are often used for styling buttons, e.g., for form submissions.
- `control`: The `control` class is used for styling control elements, such as forward/backward arrows in a photo
  gallery or slider navigation buttons.
- `dropdown`: This class is applied to style dropdown lists.

## Media Queries

- `phone`, `mobile`: These classes are used for styling elements for mobile devices.
- `phablet`: It's used for larger-screen phones (6-7").
- `tablet`: The `tablet` class is often used for styling tablets.
- `notebook`, `laptop`: These classes are applied to style laptop-related elements.
- `desktop`: It's used for styling desktop-related elements.

## Sizing

- `tiny`, `xs`: These classes are used for styling tiny or extra-small elements.
- `small`, `sm`: The `small` class is often used for small elements.
- `medium`, `base`: These classes are used for styling medium-sized elements.
- `big`, `large`, `lg`: The `big` class is often used for large elements.
- `huge`, `xl`: These classes are applied for styling huge or extra-large elements.
- `narrow`: It's used for styling narrow elements.
- `wide`: The `wide` class is applied for styling wide elements.

## Miscellaneous

- `search`: This class is often used for styling search elements.
- `socials`: The `socials` class is used for styling blocks of social media icons.
- `advertisement`, `adv`, `commercial`, `promo`: These classes are often used for styling advertisement blocks, but it's
  not recommended to use them for internal ads that may be blocked by ad blockers.
- `features`, `benefits`: These classes are used for styling lists of product or service features.
- `slider`, `carousel`: These classes are often applied to style interactive sliders or carousels.
- `pagination`: It's used for styling page navigation elements.
- `user`, `author`: These classes are often used for styling user or author-related content.
- `meta`: The `meta` class is applied for styling blocks with additional information, such as tags and publication dates
  in a post.
- `cart`, `basket`: These classes are used for styling shopping cart elements.
- `breadcrumbs`: The `breadcrumbs` class is applied to style breadcrumb navigation.
- `more`, `all`: These classes are often used for styling links leading to additional information.
- `modal`: The `modal` class is used to style modal (dialog) windows.
- `popup`: It's applied for styling pop-up windows.
- `tooltip`, `tip`: These classes are used for styling tooltips.
- `preview`: The `preview` class is applied for styling teasers or previews, often found in news or blog posts,
  typically containing a title, description, and image. A link to the full version is usually provided.
- `overlay`: It's often used for styling overlay layers, such as dimming images or creating modal windows.

## States

- `active`, `current`: These classes are often used to style active or current elements, such as the current menu item.
- `visible`: The `visible` class is used for styling visible elements.
- `hidden`: It's used for styling hidden elements.
- `error`: The `error` class is applied for styling error states.
- `warning`: This class is used for styling warning states.
- `success`: Often used for styling elements indicating the successful completion of a task.
- `pending`: It's used for elements in a pending or waiting state, typically transitioning to either an error or success
  state.

## Examples of Usage

### Simple List

```html

<ul class="list">
  <li class="item">First</li>
  <li class="item">Second</li>
  <li class="item">Third</li>
</ul>
```

### User Image (User pic)

```html

<div class="user">
  <img class="user__img" src="user.png" alt="Serhii Shramko">
  <a class="user__link" href="#">Serhii Shramko</a>
</div>
```

### Gallery

```html

<div class="gallery">
  <ul class="gallery__list">
    <li class="gallery__item">
      <img class="gallery__img" src="flowers.jpg" alt="Flowers on the field">
    </li>
    <li class="gallery__item">
      <img class="gallery__img" src="trees.jpg" alt="Trees on the field">
    </li>
  </ul>
</div>
```

### Navigation

```html

<nav class="nav">
  <a class="nav__link nav__link--active">Home</a>
  <a class="nav__link" href="#">Secondary</a>
  <a class="nav__link" href="#">Third from the End</a>
  <a class="nav__link" href="#">Penultimate</a>
  <a class="nav__link" href="#">The Very End</a>
</nav>
```

You can read important information
about [difference between absolute and relative URL in HTML](/blog/difference-between-absolute-and-relative-url) because
junior developers usually makes some errors in navigation blocks.

```html

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__item--current">
      <a class="nav__link">Home</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Articles</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Photos</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Policy</a>
    </li>
  </ul>
</nav>
```

### Widget in Sidebar

```html

<div class="widget">
  <h4 class="widget__title">Jelly</h4>

  <div class="widget__content">
    <p>
      To cultivate a sociable and amiable jelly, you'll require a foam roll, two kilograms of sugar, three eggs, and
      half a cup of acetone.
    </p>

    <a class="widget__link" href="#">More.</a>
  </div>
</div>
```

### News Block

```html

<div class="news">
  <h2 class="news__title">News</h2>

  <ul class="news__list">
    
    <li class="news__item item-news">
      <h3 class="item-news__title">Ice Skating Competition Among Smelt Fish</h3>
      <div class="item-news__text">
        <p>The killick team from Petrozavodsk emerged victorious.</p>

        <a href="#" class="item-news__link">Read More</a>
      </div>
    </li>

    <li class="news__item item-news">
      <h4 class="item-news__title">Scientists Clarify the Role of a Nail File in Nail Care</h4>
      <div class="item-news__text">
        <p>British scientists highly rate the contribution of nail files to growing one-and-a-half-meter-long nails.</p>

        <a href="#" class="item-news__link">Don't Read More</a>
      </div>
    </li>
  </ul>
</div>
```

### Blog Article (Simple Version)

```html

<article class="article">
  <h3 class="article__title">Exploring Chakras with a Bunch of Parsley</h3>
  <time datetime="23-05-1993" class="article__datetime">May 23</time>

  <div class="article__author author-article">
    <img class="author-article__img" src="user.png" alt="Jon Wick">
    <a class="author-article__link" href="#">Jon Wick</a>
  </div>

  <div class="article__content">
    Visit the market and buy a bunch of parsley, about 100 grams. Carefully sort it out, remove bugs and caterpillars.
    Give the bugs to the cat for playtime, and let the caterpillars inhabit your cactus pot. Name one of them John and
    the other Billy, and you'll have your very own Wild West. Now, back to that bunch of parsley. Gently stroke it
    behind the ear, for yourself or your cat. Tie it with a satin ribbon, don't forget to make a bow. Congratulations!
    You now have a fully domesticated bunch of parsley that will joyfully follow you around and sprout its seeds in your
    slippers.
  </div>
</article>
```

### Blog Article (Complex Version)

```html

<article class="entry">
  <header class="entry__header">
    <h3 class="entry__title title-entry">
      <a class="title-entry__link" href="#">Rubber Ducks as a Means of Self-Discovery</a>
    </h3>

    <time class="entry__datetime">May 32, 10:87</time>
  </header>

  <div class="entry__author author-entry">
    <img class="author-entry__img" src="userpic.png" alt="Vasilisa Sergeevich">

    <a class "author-entry__link" href="#">Vasilisa Sergeevich</a>
  </div>

  <div class="entry__content">
    Retrieve a box from the attic with fifty rubber ducks left over from the New Year's celebration. Lay them out in the
    shape of a pentagram on your room's floor, using the ducks and lit candles. Sit in the middle in a lotus position,
    take a German-Portuguese dictionary in each hand, clear your throat, take a deep breath, and, with full commitment,
    exclaim, "Quack!"
  </div>

  <div class="entry__tags tags-entry">
    <h4 class="tags-entry__title">Tags</h4>

    <ul class="tags-entry__list">
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">Handmade Round Dance</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">Porcelain Slippers</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">Gutalin in Cuisine</a>
      </li>
    </ul>
  </div>

  <div class="entry__actions actions-entry">
    <ul class="actions-entry__list">
      <li class="actions-entry__item actions-entry__item--read">
        <a class="actions-entry__link" href="#">200 Replies</a>
      </li>
      <li class="actions-entry__item actions-entry__item--write">
        <a class="actions-entry__link" href="#">Write to US</a>
      </li>
      <li class="actions-entry__item actions-entry__item--share">
        <a class="actions-entry__link" href="#">Share this Article</a>
      </li>
    </ul>
  </div>
</article>
```

By following the BEM methodology and using these common words in your CSS classes, you can create a structured and
maintainable codebase for your web projects.

This
approach [enhances collaboration and simplifies](http://localhost:3000/blog/class-naming-conventions#understanding-the-importance-of-html-class-naming-conventions)
the process of understanding and maintaining your stylesheets.

Explore the world of CSS class names and learn how to use common words in your classes, following the Block Element Modifier (BEM) methodology for structured and maintainable web styling. Dive into the best practices of CSS naming and create a more organized codebase.

Common CSS Class Names


Title: Installing PostgreSQL on macOS: A Step-by-Step Guide

Are you looking to set up a powerful and reliable relational database system on your macOS machine? PostgreSQL, also
known as Postgres, is an excellent choice. It's a popular open-source database that offers robust features and
scalability. In this guide, we'll walk you through the steps to install PostgreSQL on your macOS system.

## Step 1: Homebrew Installation

First, let's ensure that you have Homebrew, a package manager for macOS, installed on your system. If you don't have it
already, you can install it using the following command in your terminal:

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

## Step 2: Installing PostgreSQL

With Homebrew in place, we can now proceed to install PostgreSQL. Open your terminal and run the following command:

```shell
brew install postgresql
```

Homebrew will fetch and install PostgreSQL along with its dependencies. This process may take a few minutes.

## Step 3: Starting and Stopping PostgreSQL

After the installation is complete, you can start the PostgreSQL server with the following command:

```shell
brew services start postgresql
```

To stop the PostgreSQL server when you're done, use:

```shell
brew services stop postgresql
```

## Step 4: Creating a Database

Now that PostgreSQL is up and running, you can create your first database. Use the following command to access the
PostgreSQL interactive terminal:

```shell
psql
```

You can create a new database with the following SQL command, replacing `mydatabase` with your desired database name:

```sql
CREATE DATABASE mydatabase;
```

## Step 5: Accessing PostgreSQL

You can access PostgreSQL using various database clients and tools, or you can continue to use the terminal. To connect
to your newly created database, use:

```shell
psql -d mydatabase
```

## Step 6: Setting a Password (Optional)*

By default, PostgreSQL is installed without a password. It's highly recommended to set a password for the `postgres`
user to enhance security. To do this, run:

```shell
psql
ALTER USER postgres PASSWORD 'yourpassword';
```

Replace `yourpassword` with a strong password of your choice.

## Conclusion

Congratulations! You've successfully installed PostgreSQL on your macOS system. You're now ready to create, manage, and
interact with relational databases using this powerful and versatile database management system.

Remember to consult the [PostgreSQL documentation](https://www.postgresql.org/docs/current/index.html) and official
resources for more advanced configuration and usage
options. Happy database management!


We'll walk you through the steps to install PostgreSQL on your macOS system.

Installing PostgreSQL on macOS


How to move the cursor to the beginning or end of an input field using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Move Cursor to Beginning/End of Input Field</title>
  </head>
  <body>
    <label for="myInput">Type something here:</label>
    <input id="myInput" type="text" value="Hello, World!">

    <button onclick="moveCursorToBeginning()">Move Cursor to Beginning</button>
    <button onclick="moveCursorToEnd()">Move Cursor to End</button>

    <script>
      function moveCursorToBeginning() {
        const input = document.getElementById("myInput");
        input.focus();
        input.setSelectionRange(0, 0);
      }

      function moveCursorToEnd() {
        const input = document.getElementById("myInput");
        const length = input.value.length;
        input.focus();
        input.setSelectionRange(length, length);
      }
    </script>
  </body>
</html>
```

In this example, we have an input field with an id of `myInput` and two buttons, each of which calls a JavaScript
function when clicked.

## Move cursor to beginning

The `moveCursorToBeginning` function first gets a reference to the input field
using [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).

It then calls the `focus()` method to set the input field as the active element and brings it into focus.

Finally, it calls
the [setSelectionRange](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) method to
set the selection range to the beginning of the input field (i.e., from index 0 to index 0).

```js
// Syntax
setSelectionRange(selectionStart, selectionEnd) // 0, 0 moved the cursor to the start
```

## Move cursor to the end

The `moveCursorToEnd` function works similarly, but instead of setting the selection range to the beginning of the input
field, it sets it to the end of the input field by passing in the `length` of the input field's value as both the start
and end index of the selection range.

By using these two functions, you can easily move the cursor to the beginning or end of an input field in JavaScript.

## Useful links

- [caniuse](https://caniuse.com/?search=setSelectionRange)
- [Demo](https://emgbkp.csb.app/)





How to move cursor to the end of input with JavaScript

Move cursor to the end of input


Working with dates is an essential part of web development. At some point, you may need to check if a given date falls
between two other dates. In this article, we will explore how to accomplish this task using JavaScript.

There are a few different approaches to checking if a date is between two other dates, but we will focus on the most
straightforward method using the built-in Date object and its `getTime()` method. The `getTime()` method returns the
number of milliseconds since **January 1, 1970**, which is also known as
the [Unix timestamp](https://en.wikipedia.org/wiki/Unix_time).

Let's start with a simple example:

```javascript
const date = new Date('2022-02-20');
const startDate = new Date('2022-01-01');
const endDate = new Date('2022-12-31');

if (date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime()) {
  console.log('The date falls between the start and end dates.');
} else {
  console.log('The date does not fall between the start and end dates.');
}
```

In this example, we first create a new Date object for the date we want to check **2022-02-20**. We then create new
Date objects for the start and end dates **2022-01-01** and **2022-12-31**, respectively.

We then use the `getTime()` method to compare the timestamps of each date. If the timestamp of the date we want to check
falls between the timestamps of the start and end dates, we log a message indicating that the date falls between the
start and end dates. Otherwise, we log a message indicating that the date does not fall between the start and end dates.

It's worth noting that the `Date` object can parse a wide variety of date formats, so you can use this method with dates
in any format that the Date object can parse.

You can also simplify the above code:

```javascript
if (startDate <= date && date <= endDate) {
  console.log('The date falls between the start and end dates.');
} else {
  console.log('The date does not fall between the start and end dates.');
}
```

In this example, we simply check if startDate is less than or equal to date AND date is less than or equal to endDate.
If both conditions are true, we log a message indicating that the date falls between the start and end dates. Otherwise,
we log a message indicating that the date does not fall between the start and end dates.

## Refactor to function

```javascript
const isBetweenDates = (startDate, endDate, date) => {
  return date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime();
}
```

```javascript:RESULT
isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 19)
); // false

isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 25)
); // true
```

## Conclusion

Checking if a date falls between two other dates in JavaScript is a straightforward process using the
`Date` object and its `getTime()` method. By comparing the timestamps of the dates, you can easily determine whether a
given date falls between two other dates.


Checks if a date is between two other dates with code examples

Check if date is between two dates


<Image src="css-hero.jpg" alt="Books about coding on the table" />

Custom text selection in CSS refers to the ability to style the text that is highlighted by a user when they select it
on a webpage. This can be a great way to add some visual flair and improve the user experience of your website. In this
article, we will go over the steps to implement custom text selection using CSS.

## Step 1: Select the text you want to style

First, you need to identify the text you want to style. You can do this by using a CSS selector to target a specific
element, such as a paragraph or a heading.

```css
p {
  /* styles for the paragraph */
}
```

## Step 2: Set the selection background color

Next, you can set the background color of the selected text using the ::selection pseudo-element.

```css
p::selection {
  background-color: yellow;
}
```

## Step 3: Set the selection text color

You can also change the color of the selected text using the ::selection pseudo-element.

```css
p::selection {
  background-color: yellow;
  color: black;
}
```

## Step 4: Add other styles as desired

Finally, you can add any other styles you want to the selected text, such as changing the font, font size, or adding a
border.

```css
p::selection {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border: 1px solid black;
}
```

## Conclusion

That's it! With these simple steps, you can create a custom text selection that will make your website stand out and
improve the user experience. Keep in mind that not all browsers support all CSS selectors, so be sure to [test your code
on multiple browsers to ensure compatibility](/blog/cross-browser-testing).


CSS - Custom text selection


I'm currently working on my [Nest.js](https://nestjs.com/) backend project and I needed to add data to the countries
table.

Usually I use [mockaroo.com](https://www.mockaroo.com/) for mocking data, but in this case when you generate schema like
this:

<Image src="mock-schema.png" alt="mockaroo.com example" />

But unfortunately in this case you get a lot of duplicates 🤯.

Therefore, I decided to share a ready-made SQL request for database seeding for countries.

```sql
INSERT INTO countries (code, name)
VALUES ('AF', 'Afghanistan'),
       ('AX', 'Aland Islands'),
       ('AL', 'Albania'),
       ('DZ', 'Algeria'),
       ('AS', 'American Samoa'),
       ('AD', 'Andorra'),
       ('AO', 'Angola'),
       ('AI', 'Anguilla'),
       ('AQ', 'Antarctica'),
       ('AG', 'Antigua and Barbuda'),
       ('AR', 'Argentina'),
       ('AM', 'Armenia'),
       ('AW', 'Aruba'),
       ('AU', 'Australia'),
       ('AT', 'Austria'),
       ('AZ', 'Azerbaijan'),
       ('BS', 'Bahamas'),
       ('BH', 'Bahrain'),
       ('BD', 'Bangladesh'),
       ('BB', 'Barbados'),
       ('BY', 'Belarus'),
       ('BE', 'Belgium'),
       ('BZ', 'Belize'),
       ('BJ', 'Benin'),
       ('BM', 'Bermuda'),
       ('BT', 'Bhutan'),
       ('BO', 'Bolivia'),
       ('BQ', 'Bonaire, Sint Eustatius and Saba'),
       ('BA', 'Bosnia and Herzegovina'),
       ('BW', 'Botswana'),
       ('BV', 'Bouvet Island'),
       ('BR', 'Brazil'),
       ('IO', 'British Indian Ocean Territory'),
       ('BN', 'Brunei Darussalam'),
       ('BG', 'Bulgaria'),
       ('BF', 'Burkina Faso'),
       ('BI', 'Burundi'),
       ('KH', 'Cambodia'),
       ('CM', 'Cameroon'),
       ('CA', 'Canada'),
       ('CV', 'Cape Verde'),
       ('KY', 'Cayman Islands'),
       ('CF', 'Central African Republic'),
       ('TD', 'Chad'),
       ('CL', 'Chile'),
       ('CN', 'China'),
       ('CX', 'Christmas Island'),
       ('CC', 'Cocos (Keeling) Islands'),
       ('CO', 'Colombia'),
       ('KM', 'Comoros'),
       ('CG', 'Congo'),
       ('CD', 'Congo, Democratic Republic of the Congo'),
       ('CK', 'Cook Islands'),
       ('CR', 'Costa Rica'),
       ('CI', 'Cote D''Ivoire'),
       ('HR', 'Croatia'),
       ('CU', 'Cuba'),
       ('CW', 'Curacao'),
       ('CY', 'Cyprus'),
       ('CZ', 'Czech Republic'),
       ('DK', 'Denmark'),
       ('DJ', 'Djibouti'),
       ('DM', 'Dominica'),
       ('DO', 'Dominican Republic'),
       ('EC', 'Ecuador'),
       ('EG', 'Egypt'),
       ('SV', 'El Salvador'),
       ('GQ', 'Equatorial Guinea'),
       ('ER', 'Eritrea'),
       ('EE', 'Estonia'),
       ('ET', 'Ethiopia'),
       ('FK', 'Falkland Islands (Malvinas)'),
       ('FO', 'Faroe Islands'),
       ('FJ', 'Fiji'),
       ('FI', 'Finland'),
       ('FR', 'France'),
       ('GF', 'French Guiana'),
       ('PF', 'French Polynesia'),
       ('TF', 'French Southern Territories'),
       ('GA', 'Gabon'),
       ('GM', 'Gambia'),
       ('GE', 'Georgia'),
       ('DE', 'Germany'),
       ('GH', 'Ghana'),
       ('GI', 'Gibraltar'),
       ('GR', 'Greece'),
       ('GL', 'Greenland'),
       ('GD', 'Grenada'),
       ('GP', 'Guadeloupe'),
       ('GU', 'Guam'),
       ('GT', 'Guatemala'),
       ('GG', 'Guernsey'),
       ('GN', 'Guinea'),
       ('GW', 'Guinea-Bissau'),
       ('GY', 'Guyana'),
       ('HT', 'Haiti'),
       ('HM', 'Heard Island and Mcdonald Islands'),
       ('VA', 'Holy See (Vatican City State)'),
       ('HN', 'Honduras'),
       ('HK', 'Hong Kong'),
       ('HU', 'Hungary'),
       ('IS', 'Iceland'),
       ('IN', 'India'),
       ('ID', 'Indonesia'),
       ('IR', 'Iran, Islamic Republic of'),
       ('IQ', 'Iraq'),
       ('IE', 'Ireland'),
       ('IM', 'Isle of Man'),
       ('IL', 'Israel'),
       ('IT', 'Italy'),
       ('JM', 'Jamaica'),
       ('JP', 'Japan'),
       ('JE', 'Jersey'),
       ('JO', 'Jordan'),
       ('KZ', 'Kazakhstan'),
       ('KE', 'Kenya'),
       ('KI', 'Kiribati'),
       ('KP', 'Korea, Democratic People''s Republic of'),
       ('KR', 'Korea, Republic of'),
       ('XK', 'Kosovo'),
       ('KW', 'Kuwait'),
       ('KG', 'Kyrgyzstan'),
       ('LA', 'Lao People''s Democratic Republic'),
       ('LV', 'Latvia'),
       ('LB', 'Lebanon'),
       ('LS', 'Lesotho'),
       ('LR', 'Liberia'),
       ('LY', 'Libyan Arab Jamahiriya'),
       ('LI', 'Liechtenstein'),
       ('LT', 'Lithuania'),
       ('LU', 'Luxembourg'),
       ('MO', 'Macao'),
       ('MK', 'Macedonia, the Former Yugoslav Republic of'),
       ('MG', 'Madagascar'),
       ('MW', 'Malawi'),
       ('MY', 'Malaysia'),
       ('MV', 'Maldives'),
       ('ML', 'Mali'),
       ('MT', 'Malta'),
       ('MH', 'Marshall Islands'),
       ('MQ', 'Martinique'),
       ('MR', 'Mauritania'),
       ('MU', 'Mauritius'),
       ('YT', 'Mayotte'),
       ('MX', 'Mexico'),
       ('FM', 'Micronesia, Federated States of'),
       ('MD', 'Moldova, Republic of'),
       ('MC', 'Monaco'),
       ('MN', 'Mongolia'),
       ('ME', 'Montenegro'),
       ('MS', 'Montserrat'),
       ('MA', 'Morocco'),
       ('MZ', 'Mozambique'),
       ('MM', 'Myanmar'),
       ('NA', 'Namibia'),
       ('NR', 'Nauru'),
       ('NP', 'Nepal'),
       ('NL', 'Netherlands'),
       ('AN', 'Netherlands Antilles'),
       ('NC', 'New Caledonia'),
       ('NZ', 'New Zealand'),
       ('NI', 'Nicaragua'),
       ('NE', 'Niger'),
       ('NG', 'Nigeria'),
       ('NU', 'Niue'),
       ('NF', 'Norfolk Island'),
       ('MP', 'Northern Mariana Islands'),
       ('NO', 'Norway'),
       ('OM', 'Oman'),
       ('PK', 'Pakistan'),
       ('PW', 'Palau'),
       ('PS', 'Palestinian Territory, Occupied'),
       ('PA', 'Panama'),
       ('PG', 'Papua New Guinea'),
       ('PY', 'Paraguay'),
       ('PE', 'Peru'),
       ('PH', 'Philippines'),
       ('PN', 'Pitcairn'),
       ('PL', 'Poland'),
       ('PT', 'Portugal'),
       ('PR', 'Puerto Rico'),
       ('QA', 'Qatar'),
       ('RE', 'Reunion'),
       ('RO', 'Romania'),
       ('RU', 'Russian Federation'),
       ('RW', 'Rwanda'),
       ('BL', 'Saint Barthelemy'),
       ('SH', 'Saint Helena'),
       ('KN', 'Saint Kitts and Nevis'),
       ('LC', 'Saint Lucia'),
       ('MF', 'Saint Martin'),
       ('PM', 'Saint Pierre and Miquelon'),
       ('VC', 'Saint Vincent and the Grenadines'),
       ('WS', 'Samoa'),
       ('SM', 'San Marino'),
       ('ST', 'Sao Tome and Principe'),
       ('SA', 'Saudi Arabia'),
       ('SN', 'Senegal'),
       ('RS', 'Serbia'),
       ('CS', 'Serbia and Montenegro'),
       ('SC', 'Seychelles'),
       ('SL', 'Sierra Leone'),
       ('SG', 'Singapore'),
       ('SX', 'Sint Maarten'),
       ('SK', 'Slovakia'),
       ('SI', 'Slovenia'),
       ('SB', 'Solomon Islands'),
       ('SO', 'Somalia'),
       ('ZA', 'South Africa'),
       ('GS', 'South Georgia and the South Sandwich Islands'),
       ('SS', 'South Sudan'),
       ('ES', 'Spain'),
       ('LK', 'Sri Lanka'),
       ('SD', 'Sudan'),
       ('SR', 'Suriname'),
       ('SJ', 'Svalbard and Jan Mayen'),
       ('SZ', 'Swaziland'),
       ('SE', 'Sweden'),
       ('CH', 'Switzerland'),
       ('SY', 'Syrian Arab Republic'),
       ('TW', 'Taiwan, Province of China'),
       ('TJ', 'Tajikistan'),
       ('TZ', 'Tanzania, United Republic of'),
       ('TH', 'Thailand'),
       ('TL', 'Timor-Leste'),
       ('TG', 'Togo'),
       ('TK', 'Tokelau'),
       ('TO', 'Tonga'),
       ('TT', 'Trinidad and Tobago'),
       ('TN', 'Tunisia'),
       ('TR', 'Turkey'),
       ('TM', 'Turkmenistan'),
       ('TC', 'Turks and Caicos Islands'),
       ('TV', 'Tuvalu'),
       ('UG', 'Uganda'),
       ('UA', 'Ukraine'),
       ('AE', 'United Arab Emirates'),
       ('GB', 'United Kingdom'),
       ('US', 'United States'),
       ('UM', 'United States Minor Outlying Islands'),
       ('UY', 'Uruguay'),
       ('UZ', 'Uzbekistan'),
       ('VU', 'Vanuatu'),
       ('VE', 'Venezuela'),
       ('VN', 'Viet Nam'),
       ('VG', 'Virgin Islands, British'),
       ('VI', 'Virgin Islands, U.s.'),
       ('WF', 'Wallis and Futuna'),
       ('EH', 'Western Sahara'),
       ('YE', 'Yemen'),
       ('ZM', 'Zambia'),
       ('ZW', 'Zimbabwe');
```

Feel free to use 🫡.


Sql dump of all the countries, country codes

SQL countries table


Initial array:

```js
const numbers = [1, 1, 1, 3, 3, 2, 2, 5, 6, 7, 7];
```

## Using a Set

```js
const uniqueNumbers = [...new Set(numbers)];
```

## Array.prototype.reduce

```js
const uniqueNumbers = numbers.reduce((previousValue, currentValue) => {
  return previousValue.includes(currentValue) ? previousValue : [...previousValue, currentValue];
}, []);
```

If you are not familiar with `reduce`, use
this [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).

## Array.prototype.filter

```js
const uniqueNumbers = numbers.filter((element, index) => {
  return numbers.indexOf(element) === index;
});
```


How to remove duplicates from an Array in JS

Code Snippets