Frontend Interview - собеседования по Javascript / Html / Css
Open in Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Show more
Network:📈 Analytical overview of Telegram channel Frontend Interview - собеседования по Javascript / Html / Css
Channel Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) in the Russian language segment is an active participant. Currently, the community unites 10 749 subscribers, ranking 11 392 in the Technologies & Applications category and 60 311 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 749 subscribers.
According to the latest data from 10 July, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -94 over the last 30 days and by -4 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 6.63%. Within the first 24 hours after publication, content typically collects 4.13% reactions from the total number of subscribers.
- Post reach: On average, each post receives 713 views. Within the first day, a publication typically gains 444 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 2.
- Thematic interests: Content is focused on key topics such as javascript, браузер, html, css, видимость.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Thanks to the high frequency of updates (latest data received on 11 July, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
10 749
Subscribers
-424 hours
-207 days
-9430 days
Posts Archive
.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Какой тег не существует в HTML?
Атрибут capture
Атрибут capture доступен для файловых <input> (тех, что имеют type="file"). Он позволяет выбрать для записи фронтальную или основную камеру телефона пользователя, а также микрофон.
📱 Работает только в мобильных браузерах!
Для атрибута capture доступно два значения:
- user — камера или микрофон направлены в сторону пользователя;
- environment — камера или микрофон направлены от пользователя. «Environment» можно перевести как «наружу» или «в сторону окружающей среды».
Если у capture не указано явно, браузер сам решит, что использовать.
А ещё capture внимательно смотрит на атрибут accept, где указан тип файла для загрузки. Это может быть видео, фотография или аудиозапись. Так выглядит <input> для отправки голосового сообщения:
<input type="file" accept="audio/*" capture="user">
👉 @frontendInterviewtoTime
Нужно создать функцию, которая принимает на вход количество секунд и возвращает строку, в которой записано количество часов и минут. Лишние секунды отбрасываются.
Примеры:
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На ближайшей лекции Digital Лектория Газпромбанка расскажем, чем занимаются фронтендеры в финтехе.
Спикер: Даша Корчуганова, руководитель фронтенд-команды направления Газпромбанк-Бизнес онлайн
Когда: 11 августа в 17:00 (по МСК)
О чем: Даша расскажет, зачем в финтехе качественный фронтенд, чем еще могут заниматься фронтендеры кроме кода и насколько подход и реализация разных проектов могут различаться в пределах даже одного банка.
Ждем тебя на лекции «Frontend — это не скучно»! Скорее регистрируйся — s.gpb.ru/m/Be7PsoOOK
Реклама Банк ГПБ (АО), ИНН: 7744001497 erid: LjN8K3LUz
Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)
Вы хотите писать красивый, структурированный и удобный JavaScript, применяя современные паттерны проектирования? Вам нужен чистый, эффективный, управляемый код? Хотите быть в курсе последних передовых практик? Если да, то это обновленное второе издание книги - идеальное место для начала работы.
👉 @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Для чего используются мемоизованные селекторы (memoized selectors) в React?
Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. Изучаем базу за 14 дней — всего за 990 рублей!
🗓 Начинаем 10 августа.
Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком.
Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником.
🔜 Запишитесь прямо сейчас!
Что выведется в консоль?
Напишите свой класс, который бы являлся стратегией к функции 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🤖 Изоморфные React-приложения с React.js , Next.js и TRPC.
Фуллстек разработка с SSR никогда не была такой простой и доступной!
🔵14 августа в 20:00 мск открытый урок онлайн курса «React.js Developer» от OTUS.
На этом вебинаре мы:
- научимся бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью
- на примере разберем настройку сборки, процесс разработки и развертывания приложения
- получим удобный набор для старта разработки любого веб-приложения на современном стеке!
🟠Это отличная возможность перенять опыт преподавателя и посмотреть на процесс обучения изнутри.
Оплата курса возможна любым удобным для вас способом.
➡️ Для участия в вебинаре зарегистрируйтесь: https://otus.pw/v7M61/
Нативная интеграция. Информация о продукте www.otus.ruЧто выведется в консоль?
Стоит ли покупать курсы по IT?
Front End Team Lead BCS Денис Воронин погружается в новую профессиональную область на своем youtube-канале.
«Купил DevOps курс» — обзор пока на первую главу курса, в которой Денис размышляет о полезности курсов в целом и кратко освещает, что вас ждет при их покупке.
input
Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.
Примеры таких полей:
<textarea>; <input> с текстовым содержимым (атрибуты type="text" или type="number"); <input> с нетекстовым содержимым (атрибуты type="file" или type="image"); <input> в виде чекбокса (type="checkbox") или радиокнопки (type="radio"); <select>.Событие input возникает когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления (и удаления) каждого символа. 👉 @frontendInterview
Где мои анаграммы?
Напишите функцию, которая принимает первым аргументом строку и вторым - массив строк. А возвращает массив из анаграмм первого аргумента.
Анаграмма это слово, образованное путем перестановки букв от исходного слова.
Примеры:
anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']) => ['aabb', 'bbaa']
anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) => ['carer', 'racer']
anagrams('laser', ['lazing', 'lazy', 'lacer']) => []
👉 @frontendInterview