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

🤔 Какие плюсы и минусы есть у BFF (Backend for Frontend)? Плюсы: - Специфичная логика API под каждый фронт (web, mobile). - Снижение объёма данных, оптимизация под UI. - Централизация бизнес-логики UI. Минусы: - Увеличение количества слоёв и кода. - Поддержка нескольких BFF может дублировать работу. - Дополнительная нагрузка и задержка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как изменить направление оси flexbox контейнера? Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. 🚩Возможных значения flex-direction 🟠row: Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию. 🟠row-reverse: Основная ось — горизонтальная, элементы располагаются справа налево. 🟠column: Основная ось — вертикальная, элементы располагаются сверху вниз. 🟠column-reverse: Основная ось — вертикальная, элементы располагаются снизу вверх. 🚩Примеры использования: Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

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

🚨 40 минут Пожизненный PRO по цене года закрывается прямо сейчас. Это последнее напоминание. 👉 https://easyoffer.ru/pro

🎃 3 часа до полуночи... Ровно в 00:00 предложение исчезнет, как призрак на рассвете 👻 Последний шанс забрать PRO навсегда по цене одного года. Без продлений и без воскрешений. Если откладывал — не дай этой возможности стать твоим ночным кошмаром 🦇 👉 https://easyoffer.ru/pro

🤔 Почему не пишем все стили в style? Писать все стили в style (inline-стили) сложно поддерживать и переопределять. Внешние CSS-файлы и классы обеспечивают лучшее разделение кода, читаемость, переиспользование и производительность за счёт кеширования. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🕯 Страшилка на ночь Год спустя. Финальный этап собеседования. В комнате становится холодно. Интервьюер медленно наклоняется и шепчет: «Почему вы ушли с прошлого места работы?» Ты открываешь easyoffer, а там… «Ваша подписка истекла» 💀 Чтобы эта история не стала твоей, забери пожизненный PRO по цене одного года. База собесов, эталонные ответы, автоотклики, тренажёры и всё, что появится дальше, остаются с тобой навсегда. ⏳ Осталось 7 часов. В полночь предложение исчезнет. 👉 https://easyoffer.ru/pro

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }

🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }

🟠`inherit` Наследует значение box-sizing от родительского элемента.

   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }

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

⏳ Сегодня последний день Платишь один раз и забираешь весь easyoffer навсегда, вместе со всеми будущими фичами проекта. Никаких ежегодных продлений, только ты, твой оффер и мешок конфет 🍭 🎃 Завтра цена вернётся к обычной, и такого угощения уже не будет. 👉 https://easyoffer.ru/pro

Москвич с максимальной выгодой по программе трейд-ин Технология полного цикла. Практичный багажник 520 л. Подберите удобную комплектацию. Узнать больше #реклама moskvich.ru О рекламодателе

🤔 Зачем нужна блочная область видимости, если уже есть функциональная? Функциональная область (в function) не охватывает if, for и другие блоки. До ES6 все переменные были глобальны внутри функции. Блочная область (let, const) позволяет избежать утечек переменных и защищает от переопределения в пределах блока. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Презентация к завтра? Собери её с нейросетью 💰 Получи 400 токенов при регистрации. Попробовать #реклама 16+ kampus.ai О рекламодателе

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

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

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

Пожизненный PRO — по цене одного года. Покупаешь один раз — пользуешься всю жизнь: 👉 https://easyoffer.ru/pro 🚀 PRO-доступ закроет 99% проблем на пути к офферу: 1. 1100+ записей реальных собеседований (включая топы: Сбер, Авито, Яндекс, WB, OZON, МТС). Видите всё изнутри: как спрашивают, как отвечают сильные кандидаты и на каких ошибках проваливаются 80%. 2. База live-coding задач и вопросов с реальных собесов — с уникальной системой вероятности их встречи. Готовитесь не вслепую, а точечно по темам, которые спрашивают чаще всего. 3. Эталонные ответы от Senior-разработчиков. Никакой воды и догадок — только чёткие структурированные решения, за которые дают «зелёный свет» к офферу. 4. Полный доступ ко всем грейдам и профессиям. Junior вы или Senior, тестировщик, разработчик или проджект — вы получаете ВСЕ материалы easyoffer без ограничений. Безлимитно, Все, Навсегда. 5. База 400+ тестовых заданий. Прокачивайте навыки на реальных задачах — тех самых, что дают перед собесом. 6. Автоотклики на hh — пока вы спите, резюме уходит рекрутерам автоматически. Экономия сотен часов ручного кликанья. 7. Аналитика ТОП-требований из вакансий. Парсим рынок и показываем, какие скиллы сейчас в цене. Апгрейдите резюме точечно и проходите ATS-фильтры (они отсеивают до 75% резюме ещё до рекрутера). 8. Генератор резюме и CV под каждую вакансию. Забудьте про «универсальное» резюме — нейросеть адаптирует ваш опыт под конкретную позицию за минуту и повышает шансы на приглашение в разы. 9. Тренажёры подготовки к собеседованию: «Реальное собеседование» — сценарий вопросов из настоящих интервью. «Проработка вопросов» — флеш-карточки по методике интервальных повторений (как Anki) 10. 🔥 Самое важное: все будущие фичи Вы платите один раз, а продукт растёт всю жизнь. Каждое обновление, каждый новый инструмент, каждая фича, которая появится за все годы проекта, автоматически падает вам в подписку без доплат. Вы фиксируете цену года, а получаете продукт, который через пару лет будет стоить в разы дороже ⭐️ Это уникальная акция пока сайт в режиме Beta. Успей ей воспользоваться ⏳ Завтра последний день. 👉 https://easyoffer.ru/pro

Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

🤔 Как проверить правильную иерархию 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>

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

🧿 Осталось 3 дня, чтобы забрать оберег! Пожизненный easyoffer PRO по цене одного года. Надеваешь один раз и защищён всю жизнь 🎃 От чего защищает оберег: 1. Вопросы и задачи с реальных собеседований в конкретных компаниях — от сюрпризов на собесе 2. Лучшие ответы и видео-примеры от middle/senior специалистов — от ответов уровня джуна 3. Записи реальных собеседований — от страха неизвестности 4. Обход фильтров ATS с топ-30 ключевых слов в резюме — от автоотказов, пришедших из темноты в 3 часа ночи 5. Автоотклики на hh — от бесконечных часов ручных откликов 6. Тренажёры и симуляторы — от дрожи в голосе перед интервьюером 👻 ⏳ Акция действует только до 31 октября 23:59 по МСК 👉 Забрать оберег со скидкой 70%: https://easyoffer.ru/pro

Всё для уверенной улыбки от Oral-B ✅ Совершенная технология Oral-B iO в ассортименте Oral-B ✅ Беспощадна к налёту, нежная к дёснам Купить #реклама market.yandex.ru О рекламодателе

🤔 Чем spa отличается от классического сайта? SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности. 🚩Классический сайт (MPA – Multi Page Application) Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.

<?php
  echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>

🚩SPA (Single Page Application) При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}

export default App;

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

Как зарабатывать на мобильной игре Как привлекать пользователей, работать с монетизацией и развивать мобильную игру в 2026 году? Обсудим вместе с экспертами игровой индустрии России на RuStore Mobile GameDev Conf. 2 ноября, Москва + онлайн. Участие бесплатное, по регистрации Зарегистрироваться #реклама 16+ rustore.ru О рекламодателе

🤔 Почему нельзя использовать контекст в качестве хранилища состояния? Контекст (React Context) не предназначен для частых обновлений. Он хорош для неизменяемых или редко меняемых данных (например, тема, язык). При каждом изменении контекста перерендериваются все потребители, что может вызвать проблемы с производительностью. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний