Frontend | Вопросы собесов
前往频道在 Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv
显示更多
网络:📈 Telegram 频道 Frontend | Вопросы собесов 的分析概览
频道 Frontend | Вопросы собесов (@easy_javascript_ru) 俄语 语言赛道中的 是活跃参与者。目前社区聚集了 17 871 名订阅者，在 技术与应用 类别中位列第 7 139，并在 俄罗斯 地区排名第 36 827 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 17 871 名订阅者。
根据 28 八月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -168，过去 24 小时变化为 -6，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 6.72%。内容发布后 24 小时内通常能获得 4.47% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 1 201 次浏览，首日通常累积 799 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 4。
- 主题关注点： 内容集中在 ставь, браузер, html, border, flex 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @easyoffer_adv”
凭借高频更新（最新数据采集于 29 八月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
17 871
订阅者
-624 小时
-457 天
-16830 天
帖子存档
🤔 Как следует оформлять страницу, в которой контент может быть на разных языках?
- Указывать атрибут lang в <html> и в текстовых блоках;
- Использовать hreflang в <link> и <a> для указания языковых версий;
- Хранить переводы отдельно и подгружать в зависимости от языка (через i18n).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 К какой категории относятся промисы?
Промисы (
Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами).
Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await, then/catch)
🚩Почему промисы – асинхронная конструкция?
Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Данные загружены!"); // Успех
}, 2000);
});
fetchData.then(data => console.log(data));Promise в JavaScript использовались колбэки, но они приводили к "callback hell".
function fetchData(callback) {
setTimeout(() => {
callback("Данные загружены!");
}, 2000);
}
fetchData(data => console.log(data));Promise
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));🤔 Что такое функция высшего порядка?
Функция высшего порядка — это функция, которая принимает другую функцию в аргументы или возвращает функцию как результат. Используется для абстракции, композиции, колбэков.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как проверить правильную иерархию html заголовков?
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
🚩Зачем нужна правильная иерархия заголовков?
🟠Логическая структура
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
🟠Доступность
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
🟠SEO
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
🚩Что значит "правильная иерархия заголовков"?
🟠`<h1>`
Заголовок страницы (должен быть уникальным и только один на странице).
🟠`<h2>`
Подразделы
<h1>.
🟠`<h3>`
Подразделы <h2>, и так далее.
<h1>Главный заголовок страницы</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h3>Подраздел 1.2</h3>
<h2>Раздел 2</h2>
<h3>Подраздел 2.1</h3>
<h4>Подраздел 2.1.1</h4><h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).
🟠Использование браузерных DevTools
В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.
🟠Инструменты для проверки доступности
Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
🟠Скрипт для автоматической проверки
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.
const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> --><h1>Главный заголовок</h1>
<h2>Подраздел</h2><h1> на одной странице
<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1><h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>🤔 Что известно про дескрипторы?
Property Descriptor — это объект, описывающий свойство:
- value
- enumerable
- configurable
- writable Можно получить через Object.getOwnPropertyDescriptor().
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какие знаешь подходы по написанию css?
Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные.
🟠Классический (обычный) CSS
Стандартное написание CSS без структурных ограничений.
.button {
background-color: blue;
color: white;
padding: 10px;
}Block (Блок) — независимый компонент (.button).
- Element (Элемент) — часть блока (.button__icon).
- Modifier (Модификатор) — изменение блока (.button--primary).
<button class="button button--primary">
<span class="button__icon"></span> Нажми меня
</button>.button {
background-color: gray;
color: white;
padding: 10px;
}
.button--primary {
background-color: blue;
}
.button__icon {
margin-right: 5px;
}.card {
border: 1px solid #ccc;
padding: 10px;
}
.card--dark {
background-color: black;
color: white;
}import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`;
export default function App() {
return <Button>Нажми меня</Button>;
}<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>🤔 Какие популярные подходы изобрели для Redux?
Подходы, такие как Redux Toolkit, были созданы для упрощения работы с Redux, минимизации шаблонного кода и улучшения производительности. Также популярны middleware, такие как Redux Thunk и Redux Saga, для обработки побочных эффектов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое async и await?
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
🚩Ключевое слово
async
Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"await
Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.
async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание
➕Упрощение обработки ошибок
В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.
➕Избегание "callback hell"
Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.
Ставь 👍 и забирай 📚 Базу знаний🤔 Что такое деструктуризация?
Деструктуризация — это синтаксическая возможность в JavaScript, позволяющая распаковывать значения из массивов или свойств из объектов прямо в отдельные переменные.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как изменить направление оси 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;
}<!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>🤔 Как семантически разделять контент?
- section — смысловой блок.
- article — независимая статья/новость.
- aside — побочная информация.
- nav, main, footer — для структуры страницы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как растянуть элемент на 100%?
Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение
100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.
🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.
<div style="width: 300px; background: lightblue;">
<div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div><div style="height: 300px; background: lightblue;">
<div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>width: 100%; и height: 100%;.
<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>100vw (ширина окна) и 100vh (высота окна).
<div style="width: 100vw; height: 100vh; background: coral;">
Я растянут на весь экран!
</div>width: calc(100vw - 16px); /* Учитывается ширина скролла */position: absolute.
<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
Я растянут абсолютно!
</div>
</div>flex: 1 или align-items: stretch.
<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
<div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div><div style="display: grid; width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.
<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
Я растянут с учетом отступов!
</div>
</div>🤔 На что можно заменить интерфейсы в JS?
В чистом JS — объекты с JSDoc-аннотациями, библиотеки валидации схем (zod, yup, io-ts) или JSON Schema. Эти способы позволяют определять и валидировать структуру данных без TS.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Сегодня последний день, когда можно приобрести пожизненный PRO тариф easyoffer
Акция до 20 февраля 00:00
Покупаешь сейчас один раз — пользуешься всю жизнь без лимита, включая все будущие функции.
👉 Смотри подробности тарифа и покупай на https://easyoffer.ru/
🤔 Что такое meta теги?
Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри
<head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу.
🚩Зачем нужны meta-теги?
Улучшают SEO (поисковую оптимизацию)
Управляют отображением в соцсетях и поисковиках
Настраивают адаптивность страницы (например, на мобильных устройствах)
Определяют кодировку, язык и авторство страницы
🚩Основные meta-теги с примерами
Кодировка страницы
<meta charset="UTF-8"><meta name="description" content="Лучший сайт с рецептами вкусных блюд!"><meta name="keywords" content="рецепты, еда, кулинария, блюда"><meta name="author" content="Иван Иванов"><meta name="robots" content="noindex, nofollow"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com"><meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">🤔 Что такое режим совместимости (quirks mode)?
Это режим отображения страницы в браузере с ошибками, характерными для старых версий IE. Включается, если DOCTYPE не задан или задан некорректно. Может приводить к нестандартному поведению CSS и DOM.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Завтра конец акции на возможность приобрести PRO тариф по цене одного года
Доступный функционал включает базы вопросов с собеседований, задач для live-coding, реальных интервью и тестовых заданий от топ-компаний, а также аналитику требований для резюме и тренажеры с режимом симуляции собеседования под конкретную компанию.
Акция до 20 февраля (включительно) на PRO-тариф. Покупаешь сейчас один раз — пользуешься всю жизнь без лимита, включая все будущие функции.
👉 Смотри подробности тарифа и покупай на https://easyoffer.ru/
🤔 Что такое нечистая функция?
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
🚩Признаки нечистой функции
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
🚩Примеры нечистых функций
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)addElement() (не меняет исходный массив)
function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)🤔 Что известно про обобщённые типы?
Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию.
Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку?
При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.
🟠Разделение ответственности (Separation of Concerns)
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}// CounterLogic.js
export function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}
// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}
// Counter.js (использует Button)
function Counter() {
const [count, setCount] = useState(0);
return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}x → userAge, вместо doSmth() → calculateTotalPrice().
Меньше вложенности. Вместо кучи if и else, лучше использовать early return.
Разбиение кода на модули. Один файл = одна зона ответственности.
function getDiscountedPrice(price, discount) {
if (discount <= 0) return price;
return price - price * (discount / 100);
}useState (React), ref (Vue) для простых данных внутри компонента.
Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.
🟠Следование принципам SOLID и DRY
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.
function sendEmailAndSaveToDB(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}type User = {
id: number;
name: string;
};
function getUserName(user: User): string {
return user.name;
}