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

🤔 Какие методологии есть? Методологии в верстке и CSS: - BEM (Block Element Modifier) — строгая иерархия классов; - SMACSS — деление стилей на категории (base, layout, module, state); - OOCSS (Object-Oriented CSS) — повторное использование объектов; - Atomic CSS / Utility-first — минималистичные, многоклассовые подходы (Tailwind). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Стань спикером на форуме по Кибербезопасности! С 30 сентября по 2 октября мы собераем ИБ-сообщество, чтобы честно обсудить настоящее и будущее кибербезопасности. В этом году форум «Global Information Security Days: дни глобальной информационной безопасности» ставит новые рекорды: еще больше участников, еще масштабнее программа и еще круче экспертный состав! Чувствуете в себе силы выступить на большой сцене? У нас открыт прием заявок для спикеров. Станьте голосом GIS DAYS 2026! Подать заявку #реклама 16+ gisdays.ru О рекламодателе

🤔 Какое свойство Flexbox отвечает за направление flex items? Свойство flex-direction: - row (по горизонтали), - column (по вертикали), - и их обратные варианты (row-reverse, column-reverse). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие хуки добавляют для подключения роутера? Во Vue с Vue Router: - beforeRouteEnter — до создания компонента; - beforeRouteUpdate — при смене параметров маршрута; - beforeRouteLeave — при уходе с маршрута; Используются для логики навигации, авторизации и пр. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Запустите рекламу в телеграм-каналах через Яндекс Директ Перфоманс-реклама в мессенджере продолжает работать: • Таргетинг по тематикам и регионам • Умный подбор каналов • Гибкие модели оплаты (CPC и CPV) Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. 🚩Основные принципы функционального программирования 🟠Чистые функции (Pure Functions) Функция называется чистой, если: При одинаковых входных данных всегда возвращает одинаковый результат. Не изменяет внешние переменные (нет побочных эффектов). Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data) Данные не изменяются, а создаются новые версии объектов. Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions) Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce) Функциональные методы позволяют не мутировать массив, а создавать новый. Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying) Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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

Не грузится? Понимаем. Бесплатный мессенджер для вашей компании - Битрикс24. Личные и групповые чаты, видеозвонки, каналы и нейросеть. Всё привычно и удобно. Можно перенести рабочие чаты и файлы из Telegram в Битрикс24. Начните работать на бесплатном тарифе уже сейчас. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Какие есть альтернативы SSR? - SPA + пререндеринг (Scully, React Static, Nuxt generate) — хорош для статического контента. - JAMStack + CDN — готовая сборка без сервера. - Edge rendering — через CDN-функции (например, Cloudflare Workers). - Hybrid rendering (ISR/SSG) — как в Next.js, где часть страниц SSR, часть — SSG. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Доброград: как на курорте, только это ваш дом Новый город в 2,5 часах от Москвы, в котором есть все необходимое для комфортной жизни: частное и государственное образование, охраняемая территория, леса и озёра и даже собственное гольф-поле! Квартиры и таунхаусы уже готовы к заселению Специальные предложения для покупателей: ⚡Программа Трейд-ин ⚡Выгодная рассрочка на квартиры и таунхаусы сроком до 5 лет ⚡Ипотека — действуют особые индивидуальные условия на покупку Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО Сбербанк, Банк ВТБ (ПАО). #реклама dobrograd.ru О рекламодателе

🤔 Зачем мы используем React.Fragment? React.Fragment позволяет оборачивать несколько JSX-элементов без лишнего тега в DOM. Он нужен, когда требуется вернуть несколько элементов из компонента, не создавая дополнительных обёрток (<div> и т.п.). Вот подробные текстовые ответы на твои вопросы, охватывающие темы React, Redux, верстку, TypeScript и веб-разработку в целом: Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Хочешь начать карьеру в ИТ на оплачиваемой стажировке? Присоединяйся к ИТ-лагерю Т1 для студентов вузов технических и ИТ-специальностей. Теперь в обновлённом формате: ещё больше практики, доступ к платформам Т1, а участие — оплачивается и оформляется как стажировка. За 2,5 месяца вместе с проектной командой ты пройдешь полный цикл создания ИТ-продукта: от идеи до разработки прототипа и финальной защиты. Превратить идею в проект помогут мастер-классы, общение с экспертами и погружение в процессы Т1. Направления подготовки: ✅ ручное тестирование; ✅ прикладное администрирование (DevOps); ✅ системный анализ; ✅ фронтенд-разработка (React); ✅ бэкэнд-разработка (Java). Подай заявку до 30 июня! Старт — в июле. Узнать больше #реклама 16+ career.t1.ru О рекламодателе

🤔 В чём отличие box-sizing: border-box от box-sizing: content-box? - border-box включает padding и border в размер элемента — проще контролировать итоговую ширину. - content-box — по умолчанию: ширина задаётся только для содержимого, а padding и border добавляются отдельно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое dispatch? В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React. 🟠`dispatch` в Redux В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🟠`dispatchEvent` в JavaScript (EventTarget API) В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

const button = document.querySelector("button");

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🟠`dispatch` в React (useReducer) В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

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

TOXI$, Utopia Show, Тима ищет свет на фесте Яндекса! Представь: 25 июня ты в центре московской Live Арены. Вокруг — 40+ топовых спецов Яндекса, которые не скрывают зарплаты и рассказывают, как попасть в индустрию. А вечером на одной сцене выступят Utopia Show, TRITIA, TOXI$, Илья Куруч, Александр Пушной, Тима ищет свет и Сергей Мезенцев. Это Young Con 2026. Не конференция, а настоящий фестиваль технологий. Здесь нет скучных лекций — только живые диалоги, баттлы вузов, мерч, промокоды и фуд-зона. И да, вход бесплатный. Но нужно пройти отбор. Место: Москва, ул. Западная, 45, LIVE ARENA Дата: 25 июня Регистрируйся по ссылке, пока места не разобрали. Твоя карьера в IT начинается здесь! Зарегистрироваться #реклама 16+ yandex.ru О рекламодателе

🤔 Зачем необходим DOM? DOM (Document Object Model) представляет HTML-документ в виде дерева объектов. Он необходим для доступа, изменения и взаимодействия с элементами веб-страницы с помощью JavaScript. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются теги div и span? - div — это блочный элемент, используется для структурирования больших участков контента; - span — строчный элемент, применяется для выделения текста внутри других блоков без создания новой строки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Когда брать абсолютные величины а когда относительные? Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы. 🚩Абсолютные величины (например, px, pt, cm, in) Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста. 🚩Когда использовать 1⃣Пиксели (`px`) Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне. Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки). Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh) Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты. 🟠Проценты (`%`) Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента. Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`) Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя. Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`): Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование. Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`): Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера). Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

Большая летняя распродажа курсов на Stepik На смене сезонов всегда появляется немного больше времени для себя: весенние дедлайны постепенно остаются позади, дни становятся светлее, а планы – легче. Чтобы помочь вам провести его с пользой – Stepik запускает сезонную распродажу онлайн-курсов. Она пройдет с 27 мая по 9 июня 2026 года и распространяется на многие курсы, представленные на платформе 👌 Вы можете подтянуть свои знания в программировании, дизайне, маркетинге, выучить английский язык, научиться готовить роллы и играть на гитаре с летней легкостью ❤️ Переходите в наш каталог распродажи найдите походящий курс на любую тему. Учитесь новому! Посмотреть каталог #реклама 16+ stepik.org О рекламодателе

🤔 Из каких секций состоит компонент Vue? - <template> — разметка; - <script> — логика компонента; - <style> — стили, можно использовать scoped для изоляции; Дополнительно — setup, lang, scoped, module и др. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний