Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
Frontend | Вопросы собесов
Відкрити в Telegram
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Показати більше📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов
Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 18 301 підписників, посідаючи 7 338 місце в категорії Технології та додатки та 36 921 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 18 301 підписників.
За останніми даними від 11 червня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -116, а за останні 24 години на -4, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 9.58%. Протягом перших 24 годин після публікації контент зазвичай збирає 5.76% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 1 754 переглядів. Протягом першої доби публікація в середньому набирає 1 054 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 9.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Завдяки високій частоті оновлень (останні дані отримано 12 червня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
18 301
Підписники
-424 години
-497 днів
-11630 день
Архів дописів
🤔 Когда брать абсолютные величины а когда относительные?
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
🚩Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
🚩Когда использовать
1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}.container {
width: 80%;
height: 50%;
}.text {
font-size: 1.2em;
margin: 1em;
}body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}.hero {
width: 100vw;
height: 100vh;
}.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}🤔 Что делает box-sizing: border-box?
Изменяет модель расчёта размеров элемента:
1. Ширина и высота включают содержимое, padding и border.
2. Это упрощает управление размерами, так как итоговый размер элемента остаётся фиксированным.
Без border-box (по умолчанию content-box), padding и border увеличивают размеры элемента, что усложняет расчёты.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Удобные банковские операции с навыком "помощник ВТБ"
Сделайте повседневные дела приятнее: забудьте про рутину оплаты мобильной связи, штрафов ГАИ и ЖКУ по Москве. Голосовой навык "Помощник ВТБ" на устройствах с Алисой подскажет по банковским вопросам, даст консультации по продуктам банка, а после авторизации поможет с платежами в ВТБ и выбором категорий кешбэка.
Как запустить? - Скажите: "Алиса, чат с ВТБ". Потом просто скажите: "Оплати мой мобильный". И задача будет выполнена.
Навык работает без биометрии — спокойно и удобно.
Перейти на сайт
#реклама 16+
alice.yandex.ru
О рекламодателе
🤔 Какие есть альтернативы ssr?
В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.
🚩CSR (Client-Side Rendering)
Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой
<div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.
<div id="app"></div>
<script src="bundle.js"></script>npm run buildrevalidate). После этого сервер пересоберет страницу и кэширует ее.
export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}🤔 Что известно про сложность алгоритмов?
Сложность алгоритма описывает, насколько быстро растёт время или память, необходимая для выполнения задачи при увеличении объёма данных. Обозначается как Big O:
- O(1) — константная;
- O(log n) — логарифмическая;
- O(n) — линейная;
- O(n²) — квадратичная и т.д.
Используется для анализа эффективности кода и оптимизации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
📺 База 1000+ реальных собеседований
На программиста, тестировщика, аналитика, проджекта и другие IT профы.
Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.
🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!
🤔 Что происходит в момент запроса в браузере?
Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий.
🟠Ввод URL и начало запроса
Пользователь вводит URL в адресную строку браузера.
Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.
🟠DNS-разрешение
Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.
🟠Установление TCP-соединения
После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
Браузер отправляет SYN-пакет серверу.
Сервер отвечает SYN-ACK пакетом.
Браузер отправляет ACK-пакет, подтверждая установление соединения.
🟠HTTPS и SSL/TLS
Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.
🟠Отправка HTTP-запроса
Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:
GET / HTTP/1.1
Host: www.example.com HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
</body>
</html>
Бесплатная защита от DDoS-атак
📱 DDoS-атаки способны замедлить сайт или полностью вывести его из строя. Особенно это критично в пиковые сезоны или во время распродаж, когда каждая минута простоя сайта равна потерянным клиентам.
👍 AntiDDoS от Solar Space — облачное решение для защиты сайта от DDoS-атак. Бесплатный тариф подходит для небольших ресурсов: сайтов-визиток, сайтов экспертов и корпоративных порталов.
✅ Решение не требует сложных настроек: после активации сервис сразу начинает фильтровать трафик и подавлять атаки.
👌 Подключение занимает всего 20 минут в личном кабинете. Никаких карт, подписок и скрытых платежей.
Включить
#реклама 16+
rt-solar.ru
О рекламодателе
🤔 Что такое debug?
Debug (отладка) — это процесс поиска и устранения ошибок в коде. В ходе отладки разработчик пошагово проверяет выполнение программы, отслеживает значения переменных и логику исполнения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какие значения будут являться falsy значениями?
В JavaScript значения, которые при приведении к логическому типу (boolean) становятся
false, называются "falsy" значениями. Существует всего семь таких значений:
🟠`false`
Логическое значение false.
console.log(Boolean(false)); // false console.log(Boolean(0)); // false console.log(Boolean(-0)); // false BigInt с значением ноль.
console.log(Boolean(0n)); // false console.log(Boolean("")); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean(NaN)); // false false.
const values = [false, 0, -0, 0n, "", null, undefined, NaN];
values.forEach(value => {
if (!value) {
console.log(`${value} is falsy`);
}
});if (!false) {
console.log('false is falsy'); // выводится
}
if (!0) {
console.log('0 is falsy'); // выводится
}
if (!"") {
console.log('"" is falsy'); // выводится
}
if (!null) {
console.log('null is falsy'); // выводится
}
if (!undefined) {
console.log('undefined is falsy'); // выводится
}
if (!NaN) {
console.log('NaN is falsy'); // выводится
}const value = null;
const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy🤔 Как выглядят REST-запросы?
REST-запросы используют методы HTTP:
- GET /users — получить список;
- POST /users — создать нового пользователя;
- PUT /users/1 — заменить пользователя;
- PATCH /users/1 — частично обновить;
- DELETE /users/1 — удалить.
Они передают данные через URL, заголовки и тело запроса (чаще в формате JSON).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое flexbox?
Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.
Главные особенности
🟠Гибкое выравнивание
элементов в строку или колонку
🟠Равномерное распределение
пространства между элементами
🟠Упрощает адаптивную верстку
без
float и position
🟠Легкое центрирование
элементов
🚩Основные термины Flexbox
Когда включается display: flex;, элементы внутри него становятся флекс-элементами.
Flex-контейнер → родительский элемент (display: flex;)
Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
display: flex;
}.container {
display: flex;
}.container {
flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
flex-direction: column; /* В столбик */
flex-direction: row-reverse; /* Справа налево */
flex-direction: column-reverse; /* Вниз-вверх */
}.container {
justify-content: flex-start; /* По умолчанию, слева направо */
justify-content: center; /* Центр */
justify-content: flex-end; /* Справа налево */
justify-content: space-between; /* Равномерное распределение */
justify-content: space-around; /* С отступами */
justify-content: space-evenly; /* Равномерные промежутки */
}.container {
align-items: stretch; /* По умолчанию (растягивает) */
align-items: center; /* Центр по вертикали */
align-items: flex-start; /* Вверх */
align-items: flex-end; /* Вниз */
align-items: baseline; /* По базовой линии текста */
}.container {
flex-wrap: nowrap; /* По умолчанию – все в одной строке */
flex-wrap: wrap; /* Элементы переносятся */
flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}.container {
align-content: flex-start; /* Вверх */
align-content: flex-end; /* Вниз */
align-content: center; /* По центру */
align-content: space-between; /* Равномерное распределение */
align-content: space-around; /* С отступами */
align-content: stretch; /* Растянуть (по умолчанию) */
}flex-grow – рост элемента
.item {
flex-grow: 1; /* Растянется, если есть место */
}flex-shrink – сжатие элемента
.item {
flex-shrink: 0; /* Не уменьшаться */
}flex-basis – начальный размер элемента
.item {
flex-basis: 200px; /* Фиксированный размер */
}🤔 Как поставить cookie-файл так, чтобы он удалился через 3 дня?
Нужно задать атрибут времени жизни (Expires или Max-Age) на 3 дня вперёд от текущей даты. После этого браузер автоматически удалит cookie по истечении срока.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Когда нужно использовать кнопки а когда ссылки?
В веб-разработке часто возникает вопрос: использовать кнопку (
<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение.
🟠Когда использовать `<button>`?
Когда действие выполняется на странице без перехода на другую
Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)
Отправка формы
Открытие/закрытие модального окна
Включение/выключение чего-то на странице
Взаимодействие с JavaScript (AJAX-запросы, события)
<button onclick="alert('Нажато!')">Кликни</button><form>
<input type="text" placeholder="Введите имя">
<button type="submit">Отправить</button>
</form><a href="https://example.com">Перейти на сайт</a><a href="#section">Перейти вниз</a>
<section id="section">Контент</section><a href="https://example.com" target="_blank" rel="noopener noreferrer">
Открыть в новой вкладке
</a><button> вместо ссылки
<button onclick="window.location.href='https://example.com'">Перейти</button>🤔 Как бороться с переполнением контентом?
Через:
- overflow: hidden | scroll | auto;
- ограничение размеров (max-width, max-height);
- перенос текста (word-wrap, text-overflow: ellipsis);
- адаптивные единицы (vh, vw, %, clamp()).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какими способами мы можем получить картинку с сервера?
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).
<img> – самый простой способ (браузер сам загружает)
<img src="https://example.com/image.jpg" alt="Картинка">background-image) – если нужно фоновое изображение
.element {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}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>.
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";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..." />🤔 Сколько понадобиться сравнений для того чтобы найти нужный элемент из 8?
Если применить бинарный поиск на отсортированном массиве, максимум будет log₂(8) = 3 сравнения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Чем var отличается от const ?
Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.
🚩Область видимости (Scope)
🟠Var
Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.
🟠Const
Как и
let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.
🚩Переназначение и изменение
🟠Var
Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.
🟠Const
Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.
🚩Поднятие (Hoisting)
🟠Var
Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined.
🟠Const
Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".
🚩Инициализация
🟠Var
Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.
🟠Const
Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.
var varVariable = 1;
varVariable = 2; // Переназначение возможноconst constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибкуif (true) {
var varScope = "доступна везде в функции";
const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена🤔 Что такое необъявленные (undeclared) переменные?
undeclared — это переменные, которые не были объявлены с помощью let, const или var, но используются в коде. В строгом режиме это вызовет ошибку.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое 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">