Frontend | Вопросы собесов

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? - Progressive enhancement: вначале создаётся базовая, минимальная версия, которая работает в любом браузере, а затем добавляются улучшения для современных. - Graceful degradation: вначале создаётся максимально функциональная версия, которая плавно теряет функции при запуске в старых браузерах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5. 🚩Тестирование (Test Cases) Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям. 🟠Ручное тестирование Вы запускаете код с различными значениями и проверяете результаты. 🟠Автоматизированное тестирование Пишете тестовые скрипты, которые автоматически проверяют корректность работы.

function add(a, b) {
    return a + b;
}

Мы можем протестировать её так

console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2

Однако лучше использовать автоматическое тестирование. Например, с помощью Jest

test('add function works correctly', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 0)).toBe(0);
    expect(add(-1, -1)).toBe(-2);
});

🚩Обработка крайних случаев Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями. Пустой ввод (например, add() вместо двух чисел). Очень большие числа. Неправильные типы данных (например, строка вместо числа).

   console.log(add()); // undefined или ошибка
   console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
   

🚩Отладка (Debugging) Если код не работает как надо, нужно использовать инструменты для отладки 🟠console.log() Вывод данных для проверки логики. 🟠Инструменты разработчика в браузере Для работы с JavaScript в реальном времени. 🟠Дебаггер Позволяет пошагово выполнять код. 🚩Проверка производительности Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций. 🚩Code Reviews и тестирование пользователями После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

🤔 Какие есть операторы в JS? Арифметические (+, -, *, /), логические (&&, ||, !), сравнения (==, ===, >, <), присваивания (=, +=), тернарный (?:), побитовые, typeof, instanceof, delete, new, in и др. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Кинопоиск до 360 дней бесплатно Кинопоиск — тысячи фильмов и сериалов без рекламы, в высоком качестве. Яндекс Музыка и Книги тоже в мультиподписке Плюс. Попробуйте бесплатно ❤️ Попробовать #реклама 18+ kinopoisk.ru О рекламодателе

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку. 🚩Примеры использования миксинов 1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

2⃣Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🚩Пример на LESS 1⃣Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

2⃣Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🚩Пример на Stylus 1⃣Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

2⃣Использование миксина

.box
border-radius(10px)

.button
border-radius(5px

Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего существует тег <q>? Тег <q> используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется <blockquote>. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Так вот ты какое, летнее настроение В Т-Шоп завезли новую фестивальную коллекцию. Собрали дизайнерские вещи, которые точно пригодятся: — футболки; — бандану; — плед; — веер и даже подвеску-открывашку. Идеально для путешествий, пикников и отдыха. Осталось выбрать, что первым отправится в корзину Посмотреть каталог #реклама tbank.ru О рекламодателе

🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. 🚩Как БЭМ предотвращает конфликты? 🟠Все стили зависят только от конкретного блока В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.

<div class="button">Кнопка</div>

.button {
  background: blue;
  color: white;
}

Плохой пример без БЭМ

.container .button {
  background: blue;
}

🟠Элементы (`__`) зависят только от своего блока Стили элемента никогда не зависят от родителя — только от блока.

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text">Текст карточки</p>
</div>

.card__title {
  font-size: 20px;
}

.card__text {
  color: gray;
}

🟠Модификаторы (`--`) изменяют только нужные стили Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.

<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
  padding: 10px;
  border-radius: 5px;
}

.button--red {
  background: red;
}

.button--blue {
  background: blue;
}

🟠Имена классов уникальны, нет глобальных стилей В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.

h1 {
  color: red;
}

БЭМ-версия

.card__title {
  color: red;
}

Ставь 👍 и забирай 📚 Базу знаний

Kafka на практике: продюсеры, консьюмеры, Docker Хотите увидеть, как реально работает Kafka? 3 августа в 20:00 — вебинар с живыми примерами кода. Поднимем кластер в Docker, создадим топики, напишем продюсеров на Python/Java, настроим консьюмеров с consumer groups. Разберем партиционирование, оффсеты и гарантии доставки. Для backend-разработчиков, DevOps и всех, кто любит практику. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`<h1>` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`<h2>` Подразделы <h1>. 🟠`<h3>` Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков. 🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

Ставь 👍 и забирай 📚 Базу знаний

Домашняя школа для 1-11 классов. Онлайн-обучение! ✨Льготы при поступлении в вузы и колледжи РФ! ✨Учителя регулярно проходят курсы повышения профессиональной квалификации, являются составителями и членами жюри предметных олимпиад. ✨Наставники индивидуально работают с учениками, помогая им осваивать материал и преодолевать трудности. Узнать больше #реклама 16+ schooluniversity.ru О рекламодателе

🤔 Какие методы массивов мутируют его? Методы, изменяющие (мутиующие) массив: - push(), pop() – добавление/удаление в конец. - shift(), unshift() – добавление/удаление в начало. - splice() – удаление/добавление/замена элементов. - sort() – сортирует массив по месту. - reverse() – изменяет порядок элементов. - fill() – заполняет массив одинаковыми значениями. Немутирующие (map(), filter(), slice(), concat(), reduce()) возвращают новый массив. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Какие статические методы promise знаешь? Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. 🟠`Promise.resolve(value)` – создаёт выполненный промис Возвращает успешно выполненный Promise с переданным значением.

Promise.resolve(42).then(console.log); // 42

🟠`Promise.reject(error)` – создаёт отклонённый промис Возвращает промис в состоянии "отклонён" (rejected).

Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"

🟠`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject` Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся. Если один промис отклонится, Promise.all немедленно выдаст ошибку.

Promise.all([
    Promise.resolve(10),
    Promise.resolve(20),
    Promise.resolve(30),
]).then(console.log); // [10, 20, 30]

Ошибка прерывает выполнение

Promise.all([
    Promise.resolve(1),
    Promise.reject("Ошибка!"),
    Promise.resolve(3),
]).catch(console.error); // "Ошибка!"

🟠`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject` Возвращает массив состояний (fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки.

Promise.allSettled([
    Promise.resolve(100),
    Promise.reject("Ошибка!"),
    Promise.resolve(300),
]).then(console.log);

Выведет

[
  { status: "fulfilled", value: 100 },
  { status: "rejected", reason: "Ошибка!" },
  { status: "fulfilled", value: 300 }
]

🟠`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.

Promise.race([
    new Promise(res => setTimeout(() => res("Промис 1"), 500)),
    new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)

🟠`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса. Если ВСЕ промисы отклонены (rejected), возвращает AggregateError.

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.resolve("Успех!"),
    Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"

Ошибка, если все промисы reject

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены

Ставь 👍 и забирай 📚 Базу знаний

Просто показываем промокод Просто предлагаем съездить отдохнуть со скидкой 5000 рублей от Яндекс Путешествий. Больше ничего от вас не хотим, потому что понимаем, что сил нет. Забронировать #реклама travel.yandex.ru О рекламодателе

🤔 Как перехватить глобально ошибки по бэкенду? - Через глобальный обработчик ошибок (например, process.on('uncaughtException') в Node.js); - Использовать middleware-логгер; - Интеграция с системами мониторинга (например, Sentry, Logstash); - Обработка try/catch на верхнем уровне запроса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Массажные кресла для дома! Приятная забота о себе! Массажные кресла Yamaguchi. Cканируют зажимы в теле. 2 массажных механизма. Узнать больше #реклама yamaguchi.ru О рекламодателе