JavaScript: удаление гласных

Рассмотрим изящный способ удаления всех гласных в строке с помощью JavaScript. Идея состоит в том, чтобы, получить исходную строку и вернуть её без букв аоуэыияеёю:

const input = 'Регулярное выражение'; const removeVowels = input.replace(/[аоуэыияеёю]/gi, ''); console.log(removeVowels);

Это работает. И да, это весь код, который нужен, но давайте рассмотрим подробности:

1. используем функцию replace для замены определенного совпадения.
2. это аргументы функции, для которых мы будем использовать регулярное выражение и значение для замены.

Чтобы внести ясность рассмотрим более простой пример, в котором заменим букву пустой строкой:

```
const removeVowels = input.replace('a', '');

console.log(removeVowels);
```

Однако, можно заметить, что это работает только для первого вхождения и, конечно, только для одной буквы за раз. Вот тут-то и пригодится регулярное выражение:

1. регулярное выражение заключается в обратные слеши.
2. сопоставление шаблонов задается с помощью квадратных скобок, между которыми указываются сопоставляемые буквы.
3. в конце выражения пишем gi, что означает global ignore (global указывает на применение выражения к каждому случаю найденного совпадения, а не только к первому, ignore позволяет осуществлять поиск без учета регистра)

#frontend #interview #js

CSS: @container

Правило @container позволяtт динамически управлять стилями дочернего HTML-элемента в зависимости от размера родительского контейнера, содержащего этот элемент. Запросы для контейнеров работают также как и медиа-запросы. Чтобы воспользоваться всеми преимуществами at-rule правила @container, в первую очередь, необходимо определить контекст контейнера родительского элемента, с помощью свойства container\-type:

1. container\-type: size;: это значение свойства позволяет выполнять запросы как по ширине, так и по высоте;
2. container\-type: inline\-size;: это значение свойства, позволяет выполнять запросы только по ширине.

```

Наименование

Описание товара

```

```
.post {
container-type: size;
}

.card h2 {
font-size: 1em;
color: blue;
}

@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}

```

#frontend #css

CSS: пользовательский скроллбар

С помощью псевдоэлементов ::\-webkit\-scrollbar, ::\-webkit\-scrollbar\-track , ::\-webkit\-scrollbar\-thumb можно переделать скроллбар в соответствии с требованиями к дизайну сайта:

```
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
background: #888;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

```

Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.

Помните: несмтроя на то что этот CSS-трюк отлично подходит для WebKit, другие браузеры могут не поддерживать используемые псевдоэлементы. Чтобы достичь единообразия пользовательских интерфейсов, необходимо проверять такой код во всех браузерах.

#frontend #css