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

Open in Telegram

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

Network:easyoffer Russia36 931 Technologies & Applications7 342...

📈 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 295 subscribers, ranking 7 342 in the Technologies & Applications category and 36 931 in the Russia region.

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 9.40%. 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 720 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 8.
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 13 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 295

Subscribers

-524 hours

-557 days

-11530 days

1 720

Post views

~ 1 04624 hours

~ 1 24548 hours

9.40%

Engagement rate

~ 1

Posts per day

Ads index

beta

Posts Archive

18 295

🤔 Какой способ помогает бороться с прокидыванием, помимо Redux? Можно использовать Context API, который позволяет передавать данные от родителя к потомку без явного прокидывания через props. Это удобно для глобальных данных: темы, язык, текущий пользователь. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Как бы добавлял статический метод в prototype? На самом деле, статические методы не добавляются в prototype, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в prototype, можно использовать функцию-конструктор и добавить метод вручную. 🚩Как работают статические методы? (`static`) В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🚩Добавление "статического" метода в `prototype` (не совсем статический) Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🚩Добавление метода напрямую в сам класс (имитация `static`) Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

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

18 295

🤔 Зачем нужен механизм двустороннего связывания? Two-way binding нужен для: - синхронизации состояния UI и данных без дополнительного кода; - удобной работы с формами и интерактивными компонентами; - упрощения кода (особенно в v-model, ngModel). Но может затруднять отладку и контроль, если применять безмерно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Что произойдет если мы напишем невалидную разметку? Если в 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 295

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

18 295

🤔 Что означают union и intersection в TypeScript? - Union (|): переменная может быть одного из указанных типов. Пример: type A = string | number - Intersection (&): переменная должна соответствовать всем типам сразу. Пример: type B = { name: string } & { age: number } Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Чем отличается замыкание от области видимости? Замыкание и область видимости — это два фундаментальных концепта в JavaScript, связанных с работой переменных, но они решают разные задачи. Давайте разберёмся в их отличиях. 🚩Область видимости (Scope) Область видимости определяет, где в коде можно обращаться к переменной. В JavaScript есть три основные области видимости: Глобальная область видимости – переменные доступны в любом месте кода. Область видимости функции (функциональная) – переменные доступны только внутри функции, где они были объявлены. Блочная область видимости (с let и const) – переменные доступны только внутри блока {}.

function testScope() {
  let x = 10; // x доступна только внутри testScope
  console.log(x); // 10
}
console.log(x); // Ошибка: x не определена

🚩Замыкание (Closure) Замыкание – это функция, которая запоминает область видимости, в которой была создана, даже после выхода из неё. То есть, если внутренняя функция использует переменные внешней функции, она "захватывает" их и может использовать даже после завершения работы внешней функции.

function outer() {
  let count = 0; 

  return function inner() { 
    count++;  
    console.log(count);
  };
}

const counter = outer(); // outer выполняется, но переменная count остается в памяти
counter(); // 1
counter(); // 2
counter(); // 3

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

18 295

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в сентябре: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

18 295

🤔 Можно ли добавлять несколько заголовков h1? Можно, но только по смыслу: - В HTML5 допустимо несколько h1 — по одному на секцию или article. - Главное — сохранять логичную иерархию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Что такое 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 295

Готовые апартаменты от 4,8 млн. ₽ в СПб! М. Московская ⚡Мах гарантированный доход 3 200 000 ₽ за 2 года! ⚡Скидка 100 000 ₽ за экскурсию по отелю ⚡Скидка для IT специалистов - 5%! ⚡Рассрочки на 3 года. Первоначальный взнос 500 000 ₽! ⚡Фитнес-зал, бар, коворкинг, лобби, прачечная. 20 минут пешком от метро Московская или Звездная Торопитесь, осталось всего 2 апарта по этой цене! Перейти на сайт #реклама vertical-invest.ru О рекламодателе

18 295

🤔 В чём отличие null от undefined? null в JavaScript — это явное указание на отсутствие значения или объекта, тогда как undefined означает, что переменная или свойство были объявлены, но не инициализированы. null назначается вручную разработчиком, а undefined — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. null чаще используется для инициализации переменных, ожидающих объект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

18 295

Соберитесь в Коллабе Коллабы в Битрикс24 — это мессенджер с задачником для работы с подрядчиками. Еще тут есть видеозвонки и календарь, а файлы хранятся на общем диске. Просто пригласите гостей в ваш Битрикс24. Они увидят только сообщения и задачи внутри Коллабы. ✨Вам не нужно переключаться на сторонние приложения. Вся работа в одном сервисе. Работайте вместе — прозрачно, удобно, без бардака. Зарегистрироваться #реклама 16+ collabs.bitrix24.ru О рекламодателе

18 295

🤔 Как работает hot reload (на примере Vue CLI)? 1. Webpack/Vite следит за файлами. 2. При изменении модуля: - обновляется только этот модуль в браузере. - состояние приложения сохраняется. 3. Vue CLI использует Webpack HMR API, чтобы перерендерить компоненты без перезагрузки страницы. Это ускоряет разработку и упрощает отладку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Что делает и для чего нужна функци function.Prototype.Bind? bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами. 🚩Основные возможности `bind()` Привязывает this, чтобы не потерять контекст Позволяет создавать частично примененные функции Используется в обработчиках событий и таймерах Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

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

18 295

Приглашаем на Yandex Neuro Scale В этом году главная конференция Yandex Cloud объединит разработчиков, архитекторов, инженеров и IT-руководителей, чтобы обменяться опытом и увидеть, как работают технологии, которые меняют индустрии. 7 тематических треков, 50+ докладов, реальные бизнес-кейсы и нетворкинг! ✨Участие бесплатное, нужно только зарегистрироваться!✨ Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе Реклама на Яндексе

18 295

🤔 Как реализовывается CRUD? - Через REST API с методами POST, GET, PUT, DELETE; - На уровне базы — с SQL-операциями: INSERT, SELECT, UPDATE, DELETE; - На UI — с формами создания, таблицами, редактированием и удалением записей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 295

🤔 Какие есть альтернативы у 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"); // Меняет состояние

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

18 295

🤔 Какие бывают CSS units (единицы измерения)? - Абсолютные: px, pt, cm, mm, in; - Относительные: em, rem, %, vw, vh, vmin, vmax; - Функциональные: calc(), clamp() и др. Относительные единицы зависят от размера родителя, корня или окна браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний