Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Показати більше📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов
Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 18 347 підписників, посідаючи 7 290 місце в категорії Технології та додатки та 36 850 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 18 347 підписників.
За останніми даними від 03 червня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -76, а за останні 24 години на -4, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 6.82%. Протягом перших 24 годин після публікації контент зазвичай збирає 6.98% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 1 251 переглядів. Протягом першої доби публікація в середньому набирає 1 281 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 11.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Завдяки високій частоті оновлень (останні дані отримано 04 червня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
.logo {
width: 100px;
height: 50px;
}
🚩Относительные величины (например, %, em, rem, vw, vh)
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}
🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}
🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}
🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}
🚩Комбинированное использование
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}
Ставь 👍 и забирай 📚 Базу знанийwindow.history.
🟠Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.
history.back(); // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед
Пример кнопок "Назад" и "Вперед"
<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>
🟠Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу
history.go(1) – вперед на 1 страницу
history.go(-2) – назад на 2 страницы
history.go(-2); // Перейти на две страницы назад
history.go(3); // Перейти на три страницы вперед
🟠Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии:
console.log(history.length); // Количество записей в истории
🟠Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).
history.pushState({ page: 1 }, "Title 1", "/page1");
history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю).
history.replaceState({ page: 2 }, "Title 2", "/page2");
Пример динамического изменения истории:
document.querySelector("button").addEventListener("click", () => {
history.pushState({ page: "about" }, "About Page", "/about");
});
🟠Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate
window.addEventListener("popstate", (event) => {
console.log("Текущий state:", event.state);
});
Ставь 👍 и забирай 📚 Базу знанийЕсть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFJ5n8Em ИП Галактионов Тихон Витальевич, ИНН 771618975809
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
Ставь 👍 и забирай 📚 Базу знанийdocument.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});
Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.
🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});
🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});
// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);
Ставь 👍 и забирай 📚 Базу знаний
Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
