Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Show more📈 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 279 subscribers, ranking 7 354 in the Technologies & Applications category and 36 941 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 18 279 subscribers.
According to the latest data from 14 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -124 over the last 30 days and by -6 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 9.62%. Within the first 24 hours after publication, content typically collects 5.70% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 759 views. Within the first day, a publication typically gains 1 042 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 15 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.
float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).
Основные значения float
<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>
.float-img {
float: left;
margin-right: 10px;
}
🟠Почему родитель "схлопывается" при `float`?
Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.
<div class="container">
<img src="image.jpg" class="float-img">
<p>Текст обтекает картинку.</p>
</div>
.container {
background: lightgray;
}
.float-img {
float: left;
}
Решение 1: overflow: hidden;
.container {
overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}
Решение 2: clearfix (старый способ)
.container::after {
content: "";
display: block;
clear: both;
}
🟠Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется clear.
<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>
.float-img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
🚩Почему `float` устарел и что использовать вместо него?
Раньше float использовали для создания колонок и сеток, но сегодня его заменили:
Flexbox (display: flex;) – лучше для адаптивных макетов.
CSS Grid (display: grid;) – мощный инструмент для сложных сеток.
.container {
display: flex;
align-items: center;
}
Ставь 👍 и забирай 📚 Базу знаний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 – это не просто колбэк
До появления 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));
Ставь 👍 и забирай 📚 Базу знаний<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства.
🚩Тег `<div>` (контейнер)
Блочный элемент, используется для группировки других элементов и стилизации.
<div class="container">
<p>Привет, мир!</p>
<img src="image.jpg" alt="Картинка">
</div>
Особенности <div>
- Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.
🚩Тег `<img>` (изображение)
Строчно-замещающий элемент, предназначен для вставки картинок.
<img src="logo.png" alt="Логотип">
Особенности <img>
- Не имеет закрывающего тега (<img> – одиночный тег).
- Строчно-замещающий (ведёт себя как inline, но может иметь размеры).
- Заменяется на картинку при отображении страницы.
- Требует alt для доступности и SEO.
🚩Тег `<p>` (абзац)
Блочный элемент, предназначен для разметки текста.
<p>Это текст в абзаце.</p>
Особенности <p>
- Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (<div>, <p>).
Ошибка
<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->
Ставь 👍 и забирай 📚 Базу знаний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 позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.
Ставь 👍 и забирай 📚 Базу знаний
Available now! Telegram Research 2025 — the year's key insights 
