​Напишите свой класс, который бы являлся стратегией к функции 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

Почему один middle фронтендер работает над сложными продуктами в крупной компании, а другой делает базовую вёрстку на фрилансе?

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

Сильный frontend-разработчик чётко понимает, как работает веб, умеет находить баланс между идеальным и быстрым решением, способен разговаривать на одном языке с Backend, QA и DevOps специалистами и даже может делать их работу самостоятельно.

Если сейчас вы застряли на простых и бесперспективных задачах, но хотите большего, мы поможем сдвинуть вашу карьеру с мёртвой точки.

На курсе от тимлидов с опытом работы в Вконтакте, Яндексе, Telegram Open Network и Frogly вы приобретёте все знания и навыки, необходимые для работы над крупными проектами в крутой команде, а наши HR обязательно помогут получить оффер от хорошей компании.

Новый поток стартует уже 17 августа!
Записаться

👉 @frontendInterview

Заглянем в будущее и узнаем — что ждёт там, после заветного оффера в IT- или диджитал-компанию. Как происходит адаптация новичков? Как будут оценивать, вписались вы или нет? А когда будет повышение? Эксперты расскажут обо всём этом на вебинаре.

→ Бесплатно, 15 августа в 19:00 по Москве

Спикеры:
◾️Катя Жукова, менеджер по развитию бренда работодателя в «Риалвеб»
◾️Наталия Лебедева, директор по персоналу в Хабре
◾️Владислав Шаргин, руководитель практики подбора персонала в Samokat.tech
◾️Полина Русакова, старший HR-бизнес-партнёр в redmadrobot

Вы узнаете:
— что будет происходить в первый месяц работы;
— что поможет влиться;
— как устроены процессы в IT-компаниях;
— как правильно проявлять инициативу и расти в должности.

→ Зарегистрируйтесь на вебинар

:has

Псевдокласс :has() позволяет выбрать элемент, уточнив основной селектор дополнительным, и при этом не увеличив его «вес». В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до :has().
selector1:has(selector2) {
/* … */
}

selector1 — необязательный селектор (если не указан — правило применится ко всем подходящим элементам). Аргумент selector2 в :has() описывает селектор относительно своей точки отсчёта — selector1.

По сути псевдокласс :has() позволяет уточнить основной селектор дополнительным селектором любой сложности.

💡 Использование :has() не влияет на специфичность, т. е. при расчёте веса селектора учитывается только целевой селектор, к которому применяется этот псевдокласс.

👉 @frontendInterview

Web Design in easy steps, 7th Edition (2023)

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

👉 @frontendInterview

Loop Array

Создайте функцию, которая обрабатывает массив, перемещая элементы в нём в начало или в конец массива.

Примеры:

 loopArr([1, 5, 87, 45, 8, 8], 'left', 2);

вернет результат: [87, 45, 8, 8, 1, 5]



 loopArr([1, 5, 87, 45, 8, 8], 'right', 2);

вернет результат: [8, 8, 1, 5, 87, 45]

👉 @frontendInterview