Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
Frontend | Вопросы собесов
Kanalga Telegram’da o‘tish
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Ko'proq ko'rsatish📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 18 301 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 338-o'rinni va Rossiya mintaqasida 36 921-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 18 301 obunachiga ega bo‘ldi.
11 Iyun, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -116 ga, so‘nggi 24 soatda esa -4 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 9.58% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.76% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 754 marta ko‘riladi; birinchi sutkada odatda 1 054 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 9 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 12 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
18 301
Obunachilar
-424 soatlar
-497 kunlar
-11630 kunlar
Postlar arxiv
🤔 Когда брать абсолютные величины а когда относительные?
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
🚩Абсолютные величины (например, 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">