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

Открыть в Telegram

Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky

Больше

Сеть:easyoffer Россия36 931 Технологии и приложения7 342...

📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 18 293 подписчиков, занимая 7 342 место в категории Технологии и приложения и 36 931 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 18 293 подписчиков.

Согласно последним данным от 12 июня, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -115, а за последние 24 часа — -5, при этом общий охват остаётся высоким.

Статус верификации: Не верифицирован
Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 9.40%. В первые 24 часа после публикации контент обычно набирает 5.72% реакций от общего числа подписчиков.
Охват публикаций: В среднем каждый пост получает 1 720 просмотров. В течение первых суток публикация набирает 1 046 просмотров.
Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 8.
Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky”

Благодаря высокой частоте обновлений (последние данные получены 13 июня, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

18 293

Подписчики

-524 часа

-557 дней

-11530 день

1 720

Просмотры поста

~ 1 04624 часа

~ 1 24548 часов

9.40%

Коэффициент вовлеченности

~ 1

Постов в день

Ads index

beta

Архив постов

18 287

🤔 Что произойдет если мы напишем невалидную разметку? Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так. 🚩Что делает браузер с невалидным HTML? Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что: Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег). Некоторые элементы могут быть проигнорированы или отображены некорректно. CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре. 🚩Примеры ошибок и их последствия Отсутствие закрывающего тега

<p>Привет, мир!
<p>Это новый абзац?

Вложенность тегов в неправильных местах

<p>Текст <div>Блок внутри абзаца</div></p>

По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:

<p>Текст </p>
<div>Блок внутри абзаца</div>

🟠Отсутствие `DOCTYPE` Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах

<img src="image.jpg" alt="Картинка" wrongAttr="что это?">

Незакрытые теги в таблице

<table>
  <tr>
    <td>Ячейка 1
    <td>Ячейка 2
  </tr>
</table>

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

18 287

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

18 287

Как frontend-разработчику получить оффер в Bigtech? Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные. Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду... Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке. На своем канале: 👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 2000 🤓: https://t.me/+G5L47vWngYVjYjIy Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFJNTqdS

18 287

🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение. 🚩Как работает `<datalist>`? Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`? Нет, <datalist> не работает с type="number". Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

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

18 287

🤔 Почему при обращении к примитивной строке, можно обратиться и как к объекту? Потому что временно происходит боксинг — JS оборачивает примитив во временный объект (String, Number, и т.д.), чтобы можно было вызывать методы (length, toUpperCase и др.). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В 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 Ставь 👍 и забирай 📚 Базу знаний

18 287

🤔 По какому алгоритму сравниваются deps (dependencies) между собой? React использует поверхностное сравнение ссылок (Object.is). Если хотя бы один элемент в массиве зависимостей изменился по ссылке — эффект будет вызван заново. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове 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) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний

18 287

🤔 Как работает new? Ключевое слово new создаёт новый объект, основанный на конструкторе. 1. Создаётся пустой объект, связанный с прототипом конструктора. 2. Вызывается функция-конструктор, передающая объекту свои свойства и методы. 3. Если конструктор не возвращает объект явно, возвращается новый объект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

😌 Уже умеете писать на JavaScript, но чувствуете, что используете лишь часть возможностей языка и его фреймворков? Пройдите наш тест, чтобы узнать свой уровень и станьте студентом курса: https://tglink.io/180cfdfdd8df 📈 Актуальное повышение квалификации «JavaScript Developer. Professional» от OTUS — это глубокое погружение в React, Angular, Vue, Svelte и серверную разработку на Node.js. Программа составлена практикующими экспертами, материалы постоянно обновляются под требования рынка, а все онлайн-лекции проходят в режиме реального времени. После курса вы будете: ✅ создавать полнофункциональные web-приложения на ReactJS с Redux; ✅ собирать production-проекты через Webpack и тестировать их unit-тестами; ✅ проектировать клиентские и серверные приложения с применением SOLID и Event Loop; ✅ работать с Vue.js, Svelte и TypeScript для разнообразия инструментов; ✅ организовывать хранение данных в PostgreSQL и применять TDD. 🔥 Диплом OTUS ценится крупными IT-компаниями и открывает доступ к интересным проектам и стартапам. Пройдите короткое тестирование, узнайте свой уровень и получите скидку на обучение: https://tglink.io/180cfdfdd8df erid: 2W5zFJeMWuN

18 287

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

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

18 287

Arstek Mimic – Топовый электронный микроскоп для пайки ✅Профессиональный микроскоп для точных работ! ✅ Микроскоп с увеличением до 345x, большим рабочим расстоянием до 280 мм и высокой скоростью передачи видео 60 FPS. Подходит для проверки плат, пайки микросхем, ремонта смартфонов. - Подключение к HDMI, USB, TF - 38 МП камера Panasonic - Регулируемое LED-освещение (70 диодов) - Совместим с любым монитором - Штатив i-Type, подходит для больших плат ⚡Идеальный выбор для ремонта, пайки и сборки электроники! ⚡ Перейти на сайт #реклама arstek.ru О рекламодателе

18 287

🤔 Как понять, что код написан хорошо? Хороший код легко читать, он разделён на логические части, переиспользуем, тестируем, расширяем и сопровождаем. Применяются принципы SOLID, DRY, читаемые имена, чистая архитектура. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

🤔 Для чего в js нужна асинхронность? JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет. 🟠Проблема синхронного кода Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS? Callbacks (обратные вызовы) – старый способ. Promises (fetch(), then/catch) – современный вариант. async/await – удобный синтаксис для асинхронного кода. async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность? Запросы к серверу Чтение файлов Таймеры Работа с базами данных Взаимодействие с пользователем (ожидание ввода) Ставь 👍 и забирай 📚 Базу знаний

18 287

🤔 Какие есть и как работают циклы в JS? - for — классический. - while, do...while — пока условие. - for...in — по ключам объекта. - for...of — по значениям массива/итерируемых. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее. 🟠MIME-тип (Media Type) MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например: - image/png → PNG - image/jpeg → JPEG - image/svg+xml → SVG - image/gif → GIF - image/webp → WebP

Content-Type: image/png

🟠Расширение файла Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например: - PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII). - JPEG — FF D8 FF. - GIF — 47 49 46 38 (GIF89a). Ставь 👍 и забирай 📚 Базу знаний

18 287

🤔 Как работают computed-свойства? - При первом обращении вызывается функция — результат сохраняется. - При изменении зависимостей — помечается как «грязное», и при следующем обращении — пересчитывается. - Используется для оптимизации, чтобы не вызывать вычисления каждый раз, как у methods. Важно: computed не вызывает сайд-эффекты, его задача — вычислять значения, а не "что-то делать". Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 287

🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение) При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение) При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

18 287

Получи грант до 1,2 млн руб. на обучение в магистратуре Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

18 287

🤔 Какую проблему решает Redux? Redux решает проблему глобального управления состоянием в React-приложениях. Он помогает: - Избежать "prop-drilling" — передачи данных через множество компонентов. - Централизовать и предсказуемо управлять состоянием. - Облегчить отладку, благодаря единообразному подходу к изменениям через actions и reducers. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний