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

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

Тимлид, перестаньте быть единственным взрослым в команде Чувствуете, что вся команда бежит к вам с любым вопросом? А вечером вы всё ещё решаете задачи, которые могли сделать другие? 📅 9 сентября в 20:00 Алексей Куксенок расскажет, как перестать быть "единственным взрослым" и распределить ответственность. Узнаете, как строить команду, которая работает без вас. Для тимлидов, руководителей и всех, кто хочет управлять, а не тащить. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Что такое блочная модель? Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов: - content → padding → border → margin. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет? Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены. 🚩Порядок приоритетов CSS Inline стили (наивысший приоритет) ID селекторы Классы, псевдоклассы и атрибуты Элементы и псевдоэлементы (наименьший приоритет) Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей. Ставь 👍 и забирай 📚 Базу знаний

Быстрый офер для security-специалистов в Яндекс 12–18 сентября пройдёт Week Offer Security — мероприятие быстрого найма. ⚡ Ищем специалистов с опытом от 2 лет в направлениях Application Security, Infrastructure Security и SOC L3. Как всё устроено: ✅ До 4 сентября зарегистрируйтесь на мероприятие ✅ 12 и 13 сентября пройдите технические секции онлайн ✅ С 14 по 18 сентября познакомьтесь с командами и получите офер Формат подойдёт тем, кто хочет пройти собеседования без долгих пауз между этапами и быстро получить обратную связь. Подробности и регистрация — на сайте. Перейти на сайт #реклама 16+ yandex.ru О рекламодателе

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

🤔 Когда брать абсолютные величины а когда относительные? Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы. 🚩Абсолютные величины (например, 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; /* Относительный внешний отступ */
}

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

Битрикс24 представил Коворк/Код Достаточно простыми словами описать, что нужно сделать, а Коворк/Код сам разберётся: найдёт информацию, поработает со сделками, чатами и документами, создаст или отредактирует файлы. Не нужно вручную искать информацию по разным разделам — Коворк/Код сделает это за вас. Можно поручить ему сразу несколько дел и работать с ними параллельно. А в режиме «Код» он ещё и создаёт приложения под конкретные сценарии. Собрать презентацию — Коворк/Код. Подготовить отчет — Коворк/Код. Получить благодарность от руководителя или клиента — вам. Ранний доступ к Битрикс24 Коворк/Код уже открыт. Узнать больше #реклама 16+ cowork.bitrix24.ru О рекламодателе

🤔 Как решить проблему несовместимости некоторых CSS-свойств в браузере? - Использовать vendor-префиксы (-webkit-, -moz-, -ms-, -o-); - Проверять поддержку на сайте caniuse.com; - Писать fallback-стили; - Использовать полифиллы или normalize.css для приведения к общему стилю. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

deep tech night ⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems. Разберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену. 🗒 В прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события. Зарегистрироваться #реклама 16+ deeptechnight.ru О рекламодателе

🤔 Основные причины отказа от классовых компонентов в react? С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему. 🟠Меньше кода → чище и понятнее Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount) В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти) Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции. Создают экземпляры this Обрабатывают setState Хранят лишние связи и контексты Не создают this Используют только нужные данные Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props) Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React React официально рекомендует использовать функциональные компоненты Dan Abramov (разработчик React) Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов Классы не работают в React Server Components Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки Ставь 👍 и забирай 📚 Базу знаний

Хочешь карьеру в ИТ? Начни с программы «Мини-СЕО» ⚡Попади в команду топ-менеджера Т-Банка и работай над стратегическими проектами компании. В зависимости от трека ты сможешь: — разрабатывать эффективные методологии для оценки влияния продукта на экосистему с Владимиром Любимовым; — исследовать экосистемы и находить наиболее перспективные точки роста с Максимом Безруковым; — развивать сегмент автолюбителей и заниматься региональной экспансией Т-Банка с Жорой Сукасяном; — вести стратегический план развития 3P, развивать AI-продукты и искать, где AI может упростить работу команды, c Денисом Коротовым; — участвовать в создании B2B-маркетплейса c Владимиром Абазовым. Программа подойдет студентам и джуниор-специалистам, которые сильны в математике, аналитике и программировании. Успей подать заявку до 25 сентября! Зарегистрироваться #реклама 16+ t-miniceo.ru О рекламодателе

Пожизненный PRO доступ на easyoffer — по цене одного года! До 2 сентября вы можете купить PRO навсегда. Покупаешь один раз — пользуешься всю жизнь. – База вопросов и задач из собеседований – Примеры видео-ответов на вопросы – Записи реальных собеседований – Тренажеры "Проработка вопросов" и "Реальное собеседование" – Аналитика требований из вакансий – Автоотклики на вакансии – Агрегатор вакансий (скоро) 👉 Купить PRO со скидкой 70%: https://easyoffer.ru/pro

🤔 С помощью чего можно создать асинхронные callback? Асинхронные callback можно создать через: 1. Промисы — основной способ в современных браузерах: 2. fetch('/api').then(response => callback(response)); 3. async/await — оборачиваем функцию в async, а внутри можно использовать await: 4. const callback = async () => { 5. const result = await fetch(...); 6. // обработка 7. }; 8. Таймеры и события — классические способы: 9. setTimeout(() => callback(), 1000); 10. element.addEventListener('click', () => callback()); Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Самое интересное в российском PostgreSQL этой осенью! Регистрируйтесь на бесплатную конференцию по PostgreSQL и технологиям СУБД — Tantor JAM 2026. 10 сентября, Москва. 📅 Что будет на конференции: ✅ AI-first мониторинг СУБД: что уже сегодня можно передать ИИ-агентам и как меняется профессия DBA; ✅ аналитика и HTAP без внешней обвязки, внутри Postgres; ✅ как за два года изменился PostgreSQL для 1С; ✅ защита данных в Tantor Postgres. Как всегда — технические доклады, живое общение с разработчиками и архитекторами, обмен опытом, а еще — вечерняя программа в честь пятилетия «Тантор Лабс». Участие бесплатное. 10.09.2026, Москва Зарегистрироваться #реклама 16+ tantorlabs.ru О рекламодателе

🤔 Какие есть альтернативы у redux? Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев. 🚩React Context API + useReducer Подходит для небольших и средних приложений Встроено в React (не требует установки дополнительных библиотек) useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props useReducer работает как Redux, но проще

const AuthContext = createContext();

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { dispatch } = useContext(AuthContext);
  return (
    <button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
      Войти
    </button>
  );
}

🚩Zustand Проще Redux, но с теми же возможностями Нет лишних actions и reducers, только функции

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Счетчик: {count}</button>;
}

🚩Recoil Идеален для React-приложений Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩Jotai Напоминает Recoil, но без сложных концепций Поддерживает React Suspense и асинхронные состояния

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩MobX Автоматически отслеживает изменения состояния Удобен для сложных приложений

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));

🚩XState Подходит для сложных логик (например, UI-анимаций, состояний формы) Удобно описывать последовательности действий

import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние

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

Международная выставка освещения в Гучжэне, Китай 2026 Дата: 2026. 20-25 октября ⚡Люстры, LED, smart lighting, интерьерный, коммерческий свет напрямую от фабрик Китая! ✨Посетите крупнейшую выставку света в Китае. Официальный сайт выставки! Пройти регистрацию и получить бесплатный билет: Зарегистрироваться #реклама reg.denggle.com О рекламодателе

🤔 Что известно про последнюю интересную вещь которую узнал про CSS? Например: свойство :has() стало поддерживаться в современных браузерах. Оно позволяет писать селекторы на основе потомков или соседей, что открывает новые возможности без JS. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Купить пластиковые окна РЕХАУ от производителя Улучшенная теплоизоляция. 30+ лет службы. Современные дизайнерские решения Узнать больше #реклама rhsolutions.ru О рекламодателе

🤔 Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.). <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

🟠`<canvas>` – если нужно редактировать изображение Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени

const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
  const url = URL.createObjectURL(event.data);
  document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

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