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

Open in Telegram

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

Network:easyoffer Russia36 940 Technologies & Applications7 345...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 18 270 subscribers, ranking 7 345 in the Technologies & Applications category and 36 940 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 18 270 subscribers.

According to the latest data from 15 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -134 over the last 30 days and by -7 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.73%. Within the first 24 hours after publication, content typically collects 5.72% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 778 views. Within the first day, a publication typically gains 1 046 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 9.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky”

Thanks to the high frequency of updates (latest data received on 16 June, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

18 270

Subscribers

-724 hours

-407 days

-13430 days

1 778

Post views

~ 1 04624 hours

~ 1 21848 hours

9.73%

Engagement rate

~ 1

Posts per day

Ads index

beta

Posts Archive

18 270

🤔 Как строить сетку сайта? Сетку можно строить несколькими способами: 1. CSS Flexbox — для одномерной разметки (по строке или колонке). 2. display: flex; 3. flex-direction: row; 4. justify-content: space-between; 5. CSS Grid — для двумерных сеток (и строки, и колонки). 6. display: grid; 7. grid-template-columns: repeat(3, 1fr); 8. gap: 20px; 9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.). 10. Media Queries — адаптивные сетки с изменением структуры под разные экраны. Сетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled. 🚩Пример использования 🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры С HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

С CSS

/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🟠Комбинированный подход Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.

/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}

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

18 270

🤔 Зачем нужна семантика? Семантическая разметка улучшает: - SEO – поисковики лучше понимают контент (<article>, <section>, <nav> и т.д.). - Доступность (Accessibility) – помогает экранным читалкам понимать смысл элементов. - Читаемость кода – упрощает поддержку и понимание структуры. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

18 270

🤔 Как получается, что на всех элементах есть одни и те же свойства (class, id, и т.д.)? Потому что все элементы в DOM наследуют от общего прототипа — Element, Node, EventTarget, и имеют общее API. Это часть архитектуры DOM и браузерной реализации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

Как frontend-разработчику вырасти в ЗП? День сурка frontend-разработчика выглядит так Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость». И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. В своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале. Реклама, erid: 2W5zFGM7M3o ИП Галактионов Тихон Витальевич, ИНН 771618975809

18 270

🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. 🚩Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

🚩Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

🚩Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

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

18 270

🤔 Что такое семантика? Семантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, <header>, <footer>, <article>) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-анимации (transition, @keyframes) + изменение классов через JS Метод requestAnimationFrame() Использование библиотек (GSAP, Anime.js, Velocity.js) 🟠CSS-анимации + управление через JS Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.

<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 0.5s ease-in-out;
  }
  .move {
    transform: translateX(200px);
  }
</style>

<script>
  function toggleBox() {
    document.getElementById("box").classList.toggle("move");
  }
</script>

🟠`requestAnimationFrame()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем requestAnimationFrame().

<button onclick="startAnimation()">Старт</button>
<div id="box"></div>

<style>
  #box {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
  }
</style>

<script>
  let position = 0;
  let animationId;

  function animate() {
    position += 5; // Двигаем на 5px за кадр
    document.getElementById("box").style.transform = `translateX(${position}px)`;

    if (position < 300) { // Останавливаем, когда достигнет 300px
      animationId = requestAnimationFrame(animate);
    }
  }

  function startAnimation() {
    cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
    position = 0;
    animate();
  }
</script>

🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.

<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
  function animateBox() {
    gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
  }
</script>

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

18 270

🤔 Arrow functions — to avoid using bind — чем от обычной отличается? Стрелочные функции автоматически "привязывают" this к контексту, в котором были объявлены. В отличие от обычных функций, где this зависит от вызова, стрелочная берёт его из лексического окружения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Что такое элемент 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 270

🤔 С помощью чего можно рассчитать идентификатор в JS? Можно использовать: - Счётчики (let id = 1); - UUID-библиотеки (например, uuid); - Временные метки (Date.now()); - Хеш-функции от строки или состояния объекта. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Получение размеров элемента Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Использование в классовых компонентах Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

18 270

🤔 Перечислите блочные элементы, которые вам известны (хотя бы 5). - <div> - <p> - <section> - <article> - <header> Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

18 270

🤔 Как браузер парсит HTML-файл? HTML читается построчно, из него создаётся дерево DOM, параллельно анализируются стили и скрипты. Скрипты могут блокировать парсинг, если не имеют async или defer. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Что такое 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>
  );
};

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

18 270

🤔 Какие известны способы центрирования? 1. Текстовое выравнивание: text-align: center;. 2. Flexbox: display: flex; justify-content: center; align-items: center;. 3. Grid: display: grid; place-items: center;. 4. Абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. 5. Вертикальное центрирование: line-height для текста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 270

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

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

18 270

Стажировки и вакансии для JavaScript разработчиков - Вакансии которых нет на джоб-агрегаторах - Только прямые контакты HR в Telegram @jobs_js_fronted для фронтов @jobs_js_back для бека Пока другие листают джоб-сайты — ты уже пишешь HR в Telegram.