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

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами? Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине Авторизация пользователя Темная/светлая тема приложения Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. 🚩Может ли состояние изменяться в одном месте, а использоваться в другом? Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)? Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). ID открытого товара: /products/123 Фильтры товаров: /shop?category=shoes&sort=price Страница чата с пользователем: /chat?user=ivan Ставь 👍 и забирай 📚 Базу знаний

➡️ Как расти во фронтенде и не застрять на месте? Ответ на этот и многие другие вопросы знает замечательный фронтенд разработчик из OZON — 🥷🏻 Лёша Истомин ——• 📗 Что полезного на канале  👉🏻 Как стать крутым фронтенд разработчиком в 2025? *читать* 👉🏻 Разбор 7-летнего пути в IT, собрали все ошибки построения карьеры за тебя *читать* 👉🏻 7 постов, которые важно прочитать каждому, кто ищет работу *смотреть* 👉🏻 Что обязательно должен прочитать каждый уважающий себя фронтендер *смотреть* 👉🏻 Подборка-сохраняшка полезных гайдов для фронтендеров *забрать* Постов в канале > 200, читать минимум 4 часа, так что держи ссылку на оглавление  —·· *тык* 🎁 Подписывайся и приходи на бесплатную консультацию

🤔 В чём разница между event.preventDefault и event.stopPropagation? 1. event.preventDefault: предотвращает стандартное поведение элемента (например, отправку формы). 2. event.stopPropagation: останавливает дальнейшее распространение события по дереву DOM. 3. Часто используются совместно для полной обработки события без влияния на другие элементы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

Гайд для РОПов по проведению эффективных вебинаров Как руководителям отделов продаж увеличить количество успешных сделок при том же объеме лидов с помощью вебинаров? Гайд от МТС Линк по обучающим вебинарам для отделов продаж. ✅ В гайде: - Как эффективнее прокачивать скиллы менеджеров и закрывать больше сделок за меньшие сроки; - Как организовать тренинг так, чтобы участники действительно подключились и дошли до финального модуля; - Как выявить слабого менеджера и улучшить его показатели; - Как сэкономить время на организации вебинара и пригласить всех участников в 2 клика. Бонус внутри: 5 прикладных советов по контролю внимания участников во время вебинара ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Как Autoprefixer понимает, где поставить префиксы? Он ориентируется на базу данных Can I Use и список браузеров, указанный в конфигурации проекта. На основе этих данных он определяет, какие свойства и где требуют префиксов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 База 1000+ реальных собеседований На программиста, тестировщика, аналитика, проджекта и другие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

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

VK RecSys Challenge — решите задачу холодного старта Привет! Открываем регистрацию на VK RecSys Challenge – соревнование по разработке рекомендательных систем. Задача – решить одну из ключевых проблем рекомендаций: как показать пользователю ролик, который он точно посмотрит, даже если никто этот ролик не видел. Вам предстоит поработать с реальным датасетом VK-LSVD: 40 миллиардов обезличенных пользовательских взаимодействий и 20 миллионов коротких видео. Ждём студентов, исследователей, ML-инженеров – всех, кому интересен мир рекома. Формат участия: - индивидуально или в команде до 4 человек - 5 сабмитов в день - призовой фонд – 2 500 000 рублей Приём заявок – до 15 декабря Подробности и регистрация – по ссылке Зарегистрироваться #реклама 16+ dev-events.com О рекламодателе

🤔 Как браузер понимает, что картинка — это картинка? По MIME-типу в заголовке ответа (Content-Type), расширению файла и контексту использования (<img src="">). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

🟠`toString()` у классов Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined

console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42));        // "42"
console.log(String({ a: 1 }));  // "[object Object]"

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

Бесплатный курс по дизайну: веб, графический и UX/UI Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии в digital, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

🤔 Чем заменить ES Modules / require? - import() — динамический импорт. - Сборщики: Webpack, Vite, Rollup. - Системы типа AMD, UMD, IIFE (устаревшие, но рабочие). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое webgl? WebGL (Web Graphics Library) — это JavaScript API для рендеринга 2D и 3D-графики в браузере без необходимости установки дополнительных плагинов. Он основан на OpenGL ES и работает внутри HTML5-элемента <canvas>. WebGL позволяет использовать мощность графического процессора (GPU) для отрисовки сложных сцен, анимаций и интерактивных приложений прямо в браузере. 🚩Зачем нужен WebGL? 🟠Рендеринг 3D-графики в браузере Без WebGL для создания сложных 3D-сцен в вебе приходилось использовать Flash, Java-апплеты или другие технологии. WebGL делает это нативно в браузере. 🟠Использование аппаратного ускорения WebGL использует мощность видеокарты (GPU), а не только центрального процессора (CPU), что значительно ускоряет обработку графики. 🟠Работа в разных браузерах и на разных устройствах WebGL работает на большинстве современных браузеров (Chrome, Firefox, Edge, Safari) и поддерживается на Windows, macOS, Linux, iOS и Android. 🟠Поддержка интерактивных приложений Используется в играх, 3D-графике, симуляциях, картографических сервисах (например, Google Maps, Cesium.js), визуализациях данных. 🟠🚩ак использовать WebGL? WebGL управляет графикой через шейдеры — небольшие программы, которые выполняются на видеокарте. Для работы с WebGL обычно используются библиотеки, упрощающие разработку, например: - Three.js — высокоуровневая библиотека для удобной работы с WebGL. - Babylon.js — мощный движок для создания 3D-приложений. - PixiJS — библиотека для 2D-графики с поддержкой WebGL.

<canvas id="webgl-canvas"></canvas>
<script>
  // Получаем WebGL-контекст
  const canvas = document.getElementById("webgl-canvas");
  const gl = canvas.getContext("webgl");

  if (!gl) {
    console.error("WebGL не поддерживается");
  }

  // Устанавливаем цвет фона и очищаем экран
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Черный фон
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

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

🤔 Как можно использовать в рамках JSX JavaScript-код? JS-код можно вставлять в JSX внутри фигурных скобок {}. Это могут быть: переменные, выражения, вызовы функций, условия через тернарный оператор. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Гайд для маркетологов по эффективным онлайн-встречам Как CMO, PR и digital-маркетологам повысить результативность брейнштормов, совещаний и планерок с командой с помощью онлайн-встреч? Гайд МТС Линк: 37 страниц полезных материалов, чек-листов и кейсов для эффективных видеовстреч и совещаний. ✅ В гайде: - Как создать постоянную ссылку на регулярные встречи с подрядчиками, командой или агентствами и подключаться в 2 клика; - Как управлять встречей и завершить ее четкими договоренностями с ИИ-расшифровкой голоса в текст; - Как проводить кастдевы, брейнштормы и формулировать гипотезы с помощью 15+ шаблонов в онлайн-досках МТС Линк; - Как разом пригласить всех участников на синк таким образом, чтобы все пришли. Бонус внутри: 5 способов не выгореть от бесконечных синков. ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как взаимодействуешь с Event Loop? Через: - setTimeout, setInterval; - fetch, Promise, async/await; - события DOM. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% практики. ✅По результату обучения у вас будет портфолио из нескольких работ. ✅Сертификат о прохождении курса. ✅Возможность пройти полное обучение и получить карьерное сопровождение! Учитесь дизайну у профессионалов в Yudaev Shool. Переходите по кнопки: "Подробнее" и начинайте свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Как изменить направление оси 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>

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