Какая разница между селекторами идентификаторов и классов в CSS?

Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.

Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.

Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.

👉 @frontendInterview

Оформление программного кода

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

👉 @frontendInterview

Где мои анаграммы?

Напишите функцию, которая принимает первым аргументом строку и вторым - массив строк. А возвращает массив из анаграмм первого аргумента.

Анаграмма это слово, образованное путем перестановки букв от исходного слова.

Примеры:
anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']) => ['aabb', 'bbaa']

anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) => ['carer', 'racer']

anagrams('laser', ['lazing', 'lazy', 'lacer']) => []

👉 @frontendInterview

input

Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.
Примеры таких полей:

 <textarea>;
 <input> с текстовым содержимым (атрибуты type="text" или type="number");
 <input> с нетекстовым содержимым (атрибуты type="file" или type="image");
 <input> в виде чекбокса (type="checkbox") или радиокнопки (type="radio");
 <select>.

Событие input возникает когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления (и удаления) каждого символа.

👉 @frontendInterview

👉 @frontendInterview

​Напишите свой класс, который бы являлся стратегией к функции split, используя Symbol.

Стратегия (Strategy) — это ООП поведенческий шаблон проектирования, который позволяет расширять базовый класс или метод новым функционалом. Для этого нужно передать в него, так называемый, конкретный класс.

Чтобы написать такой класс нам понадобится специальный well-known символ [Symbol.split]. Метод split() вызывает функцию Symbol.split, а результат вызова возвращает как результат split(). У строк это уже реализовано:
"123,4,56".split(",") // ["123", "4", "56]

Мы можем добавить такое же поведение к своему классу. Разобьём строку при помощи регулярного выражения:
[Symbol.split](string) {
// Заменяем все вхождения this.value на /${this.value}/
let index = string.replace(new RegExp(this.value, "g"), `/${this.value}/`);

// убираем первый слэш, /url/Path -> url/Path
if (index[0] === "/") index = index.substr(1)
// Строка должна начинаться с url/, даже если его не было в начале
if (!index.startsWith(this.value)) index = `${this.value}/` + index;

return index;
}

Пример работы
"foobarfoobaz".split(new MySplit("foo")) // "foo/var/foo/baz"
"foobarfoobaz".split(new MySplit("bar")) // "bar/foo/bar/foobaz"

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​.preventDefault()

На каждое действие пользователя на сайте, браузер создаёт события. Это наш главный способ в коде понимать, что происходит на странице. Событие — это объект, который имеет набор свойств и методов для взаимодействия с ним.
preventDefault() — метод события. Этот метод отменяет поведение браузера по умолчанию, которое происходит при обработке события.
Например, при нажатии на ссылку, мы переходим по адресу этой ссылки. Вызов preventDefault() отменит это поведение.

Давайте разберём код из примера:
const runTimer = (inputElement) => {
setTimetout(() => {
inputElement.focus()
}, 5000)
}

const inputElement = document.querySelector('.input')
inputElement.addEventListener('mousedown', (event) => {
event.preventDefault()
runTimer(inputElement)
});

Когда пользователь нажимает на инпут элемент, генерируется цепочка событий в следующем порядке: mousedown -> mouseup -> click.
Когда происходит событие mousedown, браузер устанавливает фокус на поле ввода. Вызовом event.preventDefault() мы отменили это поведение. Затем мы запустили таймер, который установит фокус на инпут через 5 секунд с помощью вызова метода focus().

👉 @frontendInterview

Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)

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

👉 @frontendInterview

toTime

Нужно создать функцию, которая принимает на вход количество секунд и возвращает строку, в которой записано количество часов и минут. Лишние секунды отбрасываются.

Примеры:
toTime(3600); // => '1 hour(s) and 0 minute(s)'
toTime(3601); // => '1 hour(s) and 0 minute(s)'
toTime(3500); // => '0 hour(s) and 58 minute(s)'
toTime(323500); // => '89 hour(s) and 51 minute(s)'

👉 @frontendInterview

Атрибут capture

Атрибут capture доступен для файловых <input> (тех, что имеют type="file"). Он позволяет выбрать для записи фронтальную или основную камеру телефона пользователя, а также микрофон.
📱 Работает только в мобильных браузерах!

Для атрибута capture доступно два значения:
- user — камера или микрофон направлены в сторону пользователя;
- environment — камера или микрофон направлены от пользователя. «Environment» можно перевести как «наружу» или «в сторону окружающей среды».
Если у capture не указано явно, браузер сам решит, что использовать.

А ещё capture внимательно смотрит на атрибут accept, где указан тип файла для загрузки. Это может быть видео, фотография или аудиозапись. Так выглядит <input> для отправки голосового сообщения:
<input type="file" accept="audio/*" capture="user">

👉 @frontendInterview

.lastIndexOf()

Этот метод просматривает массив или строку справа налево. Если ничего не найдено, метод возвращает -1.
Для массива возвращает индекс последнего вхождения.
Для строки все то же самое, но поиск ведётся по подстрокам и возвращается индекс начала последнего вхождения подстроки.
const arr = [2, 5, 9, 2];
console.log(arr.lastIndexOf(2));
// 3
console.log(arr.lastIndexOf(7));
// -1

console.log("раз собачка, два собачка".lastIndexOf("собачка"));
// 17

👉 @frontendInterview