
A hook to toggle a boolean value with useToggle.

```tsx
import { useState, useCallback } from 'react';

export function useToggle(initialValue: boolean = false) {
  const [value, setValue] = useState<boolean>(initialValue);

  const handleToggle = useCallback((newValue) => {
    // If 'newValue' is explicitly provided as a boolean, set 'value' to 'newValue'
    if (typeof newValue === 'boolean') {
      return setValue(newValue);
    }

    // Otherwise, toggle the current state
    return setValue((prev) => !prev);
  }, []);

  return [value, handleToggle];
}
```

## Usage

```tsx
const App = () => {
  const [isModalOpened, toggleModal] = useToggle();

  return (
    <>
      <p>The modal window is {isModalOpened ? 'opened' : 'closed'}.</p>

      <button onClick={toggleModal}>
        Toggle Modal State
      </button>
    </>
  )
}
```


A hook to toggle a boolean value with useToggle.

useToggle React Hook


Many programming languages have a built-in sleep function that pauses a program’s execution for a given number of
seconds, often making it easier to add delays. However, JavaScript, being an asynchronous and non-blocking language,
doesn’t come with such a built-in feature.

This is simple code snippet that demonstrates how to create a `sleep` function in JavaScript that pauses the execution.

```javascript
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
```

```javascript:Example usage of sleep function
console.log("Task 1 started");
await sleep(2000);  // Wait for 2 seconds (2000 milliseconds)
console.log("Task 1 finished after 2 seconds");

console.log("Task 2 started");
await sleep(1000);  // Wait for 1 second (1000 milliseconds)
console.log("Task 2 finished after 1 second");
```


Learn how to pause the execution of a JavaScript program for a given number of seconds.

Sleep in JavaScript: How to Pause Execution


String manipulation is a fundamental aspect of programming in JavaScript. 

One common task is capitalizing the first letter of a string. Whether you’re formatting user input or displaying dynamic content, knowing how to manipulate strings effectively is essential.

```javascript
function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// Example usage:
const originalString = "hello world";
const capitalizedString = capitalizeFirstLetter(originalString);
console.log(capitalizedString); // Output: "Hello world"
```


Learn how to capitalize the first letter of a string in JavaScript using various methods and best practices.

How to Capitalize the First Letter of a String in JavaScript


Sorting an array of objects by multiple properties can be achieved using the `Array.prototype.sort()` method with a custom compare function.

Below are code snippets demonstrating various ways to accomplish this task.

## Sample Data
Let’s start with an example array of objects:

```javascript
const data = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Anna', age: 22, city: 'London' },
  { name: 'John', age: 25, city: 'Paris' },
  { name: 'Mike', age: 32, city: 'New York' },
];
```

## Sorting by Multiple Properties

```javascript

data.sort((a, b) => {
  if (a.name !== b.name) {
    return a.name.localeCompare(b.name);
  } else if (a.age !== b.age) {
    return a.age - b.age;
  } else {
    return a.city.localeCompare(b.city);
  }
});

console.log(data);
```

```javascript
// Output:
[
  { "name": "Anna", "age": 22, "city": "London" },
  { "name": "John", "age": 25, "city": "Paris" },
  { "name": "John", "age": 30, "city": "New York" },
  { "name": "Mike", "age": 32, "city": "New York" }
]
```


Learn how to sort an array of objects by multiple properties in JavaScript using the Array.prototype.sort() method with a custom compare function.

How to Sort an Array of Objects by Multiple Properties in JavaScript


Have you ever needed to create unique identifiers in your JavaScript app? Say hello to `window.crypto.randomUUID()`.
It's a great way to generate UUIDs in the browser.

## What is it?

Simply put, `window.crypto.randomUUID()` is a method that generates a
random v4 [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier). It's part of the Web Crypto API. It
provides cryptographically strong random values.

```javascript
const myUUID = window.crypto.randomUUID();
console.log(myUUID); // Outputs something like '3b241101-e2bb-4255-8caf-4136c566a962'
```

> Before using this function, check if it's available. Your code might run in different environments.
> I have a more detailed snippet on [checking the environment](/snippets/environment) if you want to dive deeper.

## Why use it?

• **Uniqueness**: Guarantees that each UUID is unique across space and time.

• **Security**: Generates random values that are cryptographically strong.

• **Convenience**: No need to install external libraries; it’s built into modern browsers.

• **Performance**: Generates UUIDs with minimal overhead from extra code.


## Useful links
- [MDN Web Docs - window.crypto.randomUUID()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID)
- [Can I use window.crypto.randomUUID()?](https://caniuse.com/mdn-api_crypto_randomuuid)
- [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)
- [RFC 4122 - A Universally Unique IDentifier (UUID) URN Namespace](https://tools.ietf.org/html/rfc4122)


Learn how to generate universally unique identifiers (UUIDs) in JavaScript using window.crypto.randomUUID().

Generating UUIDs in JavaScript: Best Practices


This snippet shows how to check in which environment the code is running.
It's useful when you need to run different code based on the environment, for example, to use different configurations,
APIs or Frameworks.

```typescript
const isBrowser: boolean =
  typeof window !== "undefined" &&
  typeof window.document !== "undefined";
```

```typescript
const isNode: boolean =
  typeof process !== "undefined" &&
  process.versions.node != null &&
process.versions != null;
```

```typescript
if (isBrowser) {
  // do browser only code
}

if (isNode) {
  // do Node.js only code
}
```

> I have great example where it can be used in my another snippet - [Generating UUIDs in JavaScript](/snippets/window-crypto).


Find out how to check if your JavaScript or TypeScript code is running in a browser or Node.js environment using simple code snippets

How to Check in Which Environment Your Code is Running


To remove query parameters from a URL in JavaScript, you can use the following function:

```typescript
function removeQueryParams(inputUrl: string): string {
  const url = new URL(inputUrl);
  url.search = '';
  return url.toString();
}
```

```typescript
removeQueryParams('https://www.example.com/page?param1=value1&param2=value2');
// Output: https://www.example.com/page
```


Snippet to remove a query string from a URL using JavaScript. Learn how to remove query parameters from a URL string.

Removing Query Strings from URLs in JavaScript


A JavaScript function to create a deep clone of an object, including nested objects and arrays.

```javascript
function deepClone(obj) {
  // Return the input if it's not an object
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // Clone arrays
  if (Array.isArray(obj)) {
    return obj.map(deepClone);
  }

  // Clone objects
  return Object.fromEntries(
    Object.entries(obj)
      .map(([key, value]) => [key, deepClone(value)])
  );
}
```

## Usage example

```javascript
const original = {
  a: 1,
  b: {
    c: 2,
    d: [3, 4]
  }
};

const cloned = deepClone(original);

console.log(cloned);
console.log(cloned.b === original.b); // false
console.log(cloned.b.d === original.b.d); // false
 ```


A JavaScript function to create a deep clone of an object, including nested objects and arrays.

JavaScript Deep Clone: How to Safely Copy Objects in 2024


```javascript
const range = (start, end, step = 1) => {
  const numbers = [];

  if (typeof end === 'undefined') {
    end = start;
    start = 0;
  }

  for (let i = start; i < end; i += step) {
    numbers.push(i);
  }

  return numbers;
};
```

JavaScript's developers often need a quick and efficient way to generate a sequence of numbers. Whether you're creating
an
array of values for a loop or generating a series of steps, a range function can be incredibly useful.

> Many popular solutions, even Lodash's `_.range,` are not efficient if we read the V8 blog and understand how Arrays
> work. I will describe these topics in a future post.

## Examples

```javascript
range(5); // Output: [0, 1, 2, 3, 4]
```

```javascript
range(2, 8); // Output: [2, 3, 4, 5, 6, 7]
```

```javascript
range(1, 10, 2); // Output: [1, 3, 5, 7, 9]
```


Generate an array of numbers in a range using JavaScript.

How to Use the Range Function in JavaScript: A Simple Guide


```css
/* Visually hides an element while keeping it accessible to screen readers. */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```

Developers frequently employ `display: none` to conceal content on web pages.

However, this approach can pose [accessibility](https://www.a11yproject.com/posts/how-to-hide-content/) challenges for users of screen readers, particularly when the hidden
content was intended for their benefit.

If you need more info about common css classes, check out the [post](/snippets/common-css-classes).


Hide content visually while keeping it accessible to screen readers using the visually hidden CSS technique.

Making Elements Visually Hidden for Screen Readers and Accessibility


```javascript
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
```

> This random function includes the lower bound and upper bound.
> For example, `getRandom(1, 10)` will generate a random number between 1 and 10 (inclusive).

## Usage:

```javascript
const randomNumber = getRandom(1, 10); // Generates a random number between 1 and 10
console.log(randomNumber); // Example output: 7
```


Generate a random number in a range using JavaScript.

JavaScript Random Number Generation: Best Practices


Hey there! Today, let's talk about a handy custom React hook called `useHasMounted`. This hook is quite useful when you
want to conditionally render components or perform actions based on whether your component has mounted or not.

After [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) are released, this hook will be even more useful.

```jsx
import { useState, useEffect } from 'react';

function useHasMounted() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  return hasMounted;
}
```

## Why use it?

- Conditional rendering: You can conditionally render parts of your UI that depend on the component being fully mounted.
- Avoid premature actions: Use this hook to avoid triggering actions or fetching data before your component is ready.

Custom hooks like `useHasMounted` are great for managing component lifecycle states in a more declarative and reusable
way. Happy coding!

## Usage

```jsx
const Component = () => {
  const hasMounted = useHasMounted();

  if (!hasMounted) {
    return null;
  }

  return <div>Render only on client</div>
};
```


Avert strange SSR problems with this useful React hook. Identify whether your rendering occurs on the client or server!

React Hook Tutorial: How to Use the useHasMounted Hook


## Using the Intersection Observer API

The Intersection Observer API provides a more efficient and modern approach to check if an element is in the viewport. Here's how you can use it:

```javascript
// Define the callback function to handle intersection changes
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in the viewport!');
      // You can also add any other actions you want to perform here
    }
  });
};

// Create an instance of IntersectionObserver
const observer = new IntersectionObserver(callback, {
  root: null, // Use the viewport as the root
  rootMargin: '0px',
  threshold: 0.1 // Adjust the threshold as needed
});

// Target the element to observe
const targetElement = document.querySelector('#yourElementId');
observer.observe(targetElement);
```

In this example:
- The `callback` function is executed whenever the visibility of the target element changes.
- The `IntersectionObserver` is configured to use the viewport as the root, with no margin and a threshold of 10% visibility to trigger the callback.
- Finally, the observer is set to watch the target element.

## Using a Manual Check

If you prefer a manual approach, you can use the following function to determine if an element is in the viewport:

```javascript
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// Usage example
const element = document.querySelector('#yourElementId');
if (isElementInViewport(element)) {
  console.log('Element is in the viewport!');
}
```

This function calculates the bounding rectangle of the element and checks if it lies within the viewport boundaries.


Discover how to check if an element is in the viewport using JavaScript. This guide explains both the modern Intersection Observer API and a manual method, ideal for lazy loading, animations, and more.

JavaScript Techniques for Checking Element Visibility in the Viewport


When working with JavaScript, accessing the current page's URL is a common task for various purposes like analytics tracking, dynamic content updates, and more. In this guide, we'll explore different methods to achieve this.

## 1. Using `window.location`

The most straightforward method is by utilizing the `window.location` object, which contains information about the current URL, including the protocol, host, pathname, search parameters, and more.

```javascript
const currentURL = window.location.href;
console.log("Current URL:", currentURL);
```

This will return the complete URL of the current page, including any hash or query parameters.

## 2. Using `document.URL`

Another approach is by accessing the `document.URL` property, which provides the same result as `window.location.href`.

```javascript
const currentURL = document.URL;
console.log("Current URL:", currentURL);
```

## 3. Using `location.pathname`

If you only need the path part of the URL (without the protocol, host, or query parameters), you can use the `location.pathname` property.

```javascript
const path = window.location.pathname;
console.log("Current Path:", path);
```

This will return the path portion of the URL.

## Conclusion

These examples cover various methods to retrieve different parts of the current URL using JavaScript. Additionally, you can refer to the MDN Web Docs for more information on the [Location](https://developer.mozilla.org/en-US/docs/Web/API/Location) interface and its properties.


Learn different methods to retrieve the current URL using JavaScript for analytics tracking, dynamic content updates, and more.

How to Get the Current URL with JavaScript (2024 Update)

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

- `visually-hidden`: [Visually hides](/snippets/visually-hidden) an element while keeping it accessible to screen readers
- `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.

Essential CSS Class Names Every Developer Should Know


I use PostgreSQL for my projects, and I want to share with you how to install it on macOS.
Yea can read a little bit more about how my website works in my article [How I built my blog with Next.js](/blog/introducing-the-new-shramko.dev).

## 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.

How to Install PostgreSQL on macOS (2024 Guide)


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

How to Move Cursor to the End of Input Field with JavaScript


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

How to Compare Dates in JavaScript: Check Date Ranges Easily


<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. I use [this code](https://github.com/Shramkoweb/Portfolio/blob/develop/styles/globals.css#L5) on this blog, so you can check it out by selecting the text on this page.

## 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: A Guide to Improving UX


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 Example: How to Create and Query Efficiently


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

useToggle

Sleep in JavaScript

Capitalize the First Letter of a String in JavaScript

Sort an Array of Objects by Multiple Properties

Generating UUIDs in JavaScript

Check in which environment the code is running

How to Remove a Query String From a URL in JavaScript

Deep Clone an Object in JavaScript

Range Function

Visually Hidden

Random number generator

useHasMounted

How to Check if an Element is in the Viewport in JavaScript

How to get the current URL with JavaScript

Common CSS Class Names

Installing PostgreSQL on macOS

Move cursor to the end of input

Check if date is between two dates

CSS - Custom text selection

SQL countries table

Remove Duplicates from an Array