Frontend Interview - собеседования по Javascript / Html / Css
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Больше📈 Аналитический обзор Telegram-канала Frontend Interview - собеседования по Javascript / Html / Css
Канал Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 10 793 подписчиков, занимая 11 386 место в категории Технологии и приложения и 60 232 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 10 793 подписчиков.
Согласно последним данным от 28 июня, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -74, а за последние 24 часа — 0, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 9.36%. В первые 24 часа после публикации контент обычно набирает 4.16% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 1 010 просмотров. В течение первых суток публикация набирает 449 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 4.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как javascript, браузер, html, css, видимость.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Благодаря высокой частоте обновлений (последние данные получены 29 июня, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.
@layer, дополнительная функция layer() и ключевое слово layer дают вам возможность управлять каскадными слоями.
Каскадные слои — способ группировки и порядок применения стилей в одном источнике. Они помогают браузерам понять, какие стили применить на сайте.
Источник в CSS — место, откуда браузер берёт CSS-правила. Это могут быть ваши стили на сайте, настройки пользователей в браузере и системе, а также браузерные стили по умолчанию. Подробнее об этой и других концепциях в статье «Принцип каскада».
Благодаря каскадным слоям вы напрямую управляете слоями с разными наборами CSS-правил и решаете, какие стили специфичнее и в каком порядке их применять. Так что они пригодятся для:
- сброса браузерных стилей по умолчанию;
- перезаписи стилей из CSS-фреймворков и библиотек;
- стилизации компонентов;
- хранения стилей в одном месте, например, для состояний интерактивных элементов;
- цветовых тем, схем и поддержки разных режимов передачи цветов.
Например, вот стили с @layer для состояния кнопки при фокусе и когда она неактивна. В слое states устанавливаем стили для :disabled и :focus-visible, а в components — стили кнопки по умолчанию.
@layer components, states;
@layer components {
.button {
display: block;
min-width: 210px;
border: 2px solid transparent;
border-radius: 6px;
padding: 9px 15px;
color: #000000;
font-size: 18px;
font-weight: 300;
font-family: inherit;
transition: background-color 0.2s linear;
}
.button:hover {
background-color: #FFFFFF;
cursor: pointer;
transition: background-color 0.2s linear;
}
}
@layer states {
:focus-visible {
border: 2px solid #FFFFFF;
outline: none;
}
:disabled {
background-color: #DDDDDD;
}
}
Без каскадных слоёв нам нужно задать стили классу .button с нужными псевдоклассами. При этом мы не можем хранить их в одном месте файла так, чтобы их случайно не перезаписали другие разработчики.
С каскадными слоями легче победить сторонние стили. Например, из Bootstrap. Представим, что хотим изменить размер заголовка первого уровня без мучительных поисков нужных Sass-переменных.
<h1 class="fs-1">Последние обновления</h1>
Стили Bootstrap:
.fs-1 {
font-size: 2.5rem !important;
}
Наши стили с использованием каскадных слоёв:
@import url("https://cdn.com/bootstrap.min.css") layer;
@layer {
.fs-1 {
font-size: 3rem;
}
}
Со старыми возможностями CSS эту проблему приходится решать несколькими способами. Например, модификатором !important.
.fs-1 {
font-size: 3rem !important;
}
👉 @frontendInterview console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){});// "function"
Но есть некоторые важные моменты, связанные с оператором typeof:
1. Null: Одна из известных особенностей — typeof null возвращает object. Это считается ошибкой в языке, но сохранено из-за обратной совместимости.
2. Функции: typeof для функций возвращает function. Функции в JavaScript это объекты, но оператор typeof позволяет их отличить от обычных объектов.
3. Массивы: typeof [] возвращает object, поскольку массивы в JavaScript являются разновидностями объектов. Для проверки, является ли переменная массивом, можно воспользоваться методом
Array.isArray.
4. Создание через конструктор: typeof new Number(42) или typeof new String('строка') возвращает object, т.к. когда используется ключевое слово new перед Number(42), создается новый объект типа Number, который является объектной оберткой вокруг числа 42. Таким образом, typeof new Number(42) возвращает "object", поскольку вы создали объект типа Number, даже если его внутреннее значение является числом.
Использование typeof: часто применяется для проверки типов переменных в условиях, чтобы выполнить различные действия в зависимости от типа данных.
👉 @frontendInterview h1 {
background-image:
linear-gradient(250deg,
#833AB4 0%,
#FD1D1D 50%,
#FCB045 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Подробное объяснение того, как это работает в рецепте.
👉 @frontendInterview const colors = [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '198, 35, 109', name: 'rgb' },
{ value: '55% 0.2 0', name: 'oklch' },
]
const groupedColors = Object.groupBy(colors, (color, index) => {
return color.name === 'oklch' ? 'easyToUnderstand' : 'notEasyToUnderstand'
})
console.log(groupedColors)
/*
{
easyToUnderstand: [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '55% 0.2 0', name: 'oklch' }
],
notEasyToUnderstand: [
{ value: '198, 35, 109', name: 'rgb' }
]
}
*/
👉 @frontendInterview n < 5 $100
n >= 5 и n < 10 $95
n >= 10 $90
Пример:
saleHotdogs( 1 ) => 100
saleHotdogs( 5 ) => 475
saleHotdogs( 10 ) => 900
👉 @frontendInterview
Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
