Senior Frontend - javascript, html, css
Открыть в Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Больше
Сеть:📈 Аналитический обзор Telegram-канала Senior Frontend - javascript, html, css
Канал Senior Frontend - javascript, html, css (@seniorfront) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 23 684 подписчиков, занимая 5 573 место в категории Технологии и приложения и 27 661 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 23 684 подписчиков.
Согласно последним данным от 20 октября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -249, а за последние 24 часа — -15, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 6.05%. В первые 24 часа после публикации контент обычно набирает 2.93% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 1 433 просмотров. В течение первых суток публикация набирает 694 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 2.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как css, node.js, api, архитектура, html.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
Благодаря высокой частоте обновлений (последние данные получены 21 октября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.
23 684
Подписчики
-1524 часа
-1037 дней
-24930 дней
Загружаем данные
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
октябрь '26окт. '26
октябрь '26
+77
в 2 каналах
сентябрь '26
+100
в 11 каналах
Get PRO
август '26
+104
в 0 каналах
Get PRO
июль '26
+91
в 0 каналах
Get PRO
июнь '26
+112
в 0 каналах
Get PRO
май '26
+80
в 4 каналах
Get PRO
апрель '26
+63
в 0 каналах
Get PRO
март '26
+86
в 0 каналах
Get PRO
февраль '26
+123
в 0 каналах
Get PRO
январь '26
+121
в 0 каналах
Get PRO
декабрь '25
+140
в 1 каналах
Get PRO
ноябрь '25
+186
в 0 каналах
Get PRO
октябрь '25
+214
в 0 каналах
Get PRO
сентябрь '25
+208
в 4 каналах
Get PRO
август '25
+171
в 0 каналах
Get PRO
июль '25
+243
в 0 каналах
Get PRO
июнь '25
+210
в 8 каналах
Get PRO
май '25
+211
в 6 каналах
Get PRO
апрель '25
+220
в 0 каналах
Get PRO
март '25
+250
в 0 каналах
Get PRO
февраль '25
+223
в 0 каналах
Get PRO
январь '25
+402
в 4 каналах
Get PRO
декабрь '24
+304
в 1 каналах
Get PRO
ноябрь '24
+318
в 8 каналах
Get PRO
октябрь '24
+570
в 9 каналах
Get PRO
сентябрь '24
+483
в 0 каналах
Get PRO
август '24
+518
в 0 каналах
Get PRO
июль '24
+413
в 1 каналах
Get PRO
июнь '24
+375
в 2 каналах
Get PRO
май '24
+619
в 27 каналах
Get PRO
апрель '24
+424
в 0 каналах
Get PRO
март '24
+685
в 14 каналах
Get PRO
февраль '24
+610
в 2 каналах
Get PRO
январь '24
+706
в 17 каналах
Get PRO
декабрь '23
+940
в 45 каналах
Get PRO
ноябрь '23
+919
в 27 каналах
Get PRO
октябрь '23
+1 027
в 29 каналах
Get PRO
сентябрь '23
+1 193
в 0 каналах
Get PRO
август '23
+515
в 0 каналах
Get PRO
июль '23
+543
в 0 каналах
Get PRO
июнь '23
+550
в 0 каналах
Get PRO
май '23
+471
в 0 каналах
Get PRO
апрель '23
+682
в 0 каналах
Get PRO
март '23
+868
в 0 каналах
Get PRO
февраль '23
+720
в 0 каналах
Get PRO
январь '23
+940
в 0 каналах
Get PRO
декабрь '22
+767
в 0 каналах
Get PRO
ноябрь '22
+274
в 0 каналах
Get PRO
октябрь '22
+469
в 0 каналах
Get PRO
сентябрь '22
+475
в 0 каналах
Get PRO
август '22
+504
в 0 каналах
Get PRO
июль '22
+842
в 0 каналах
Get PRO
июнь '22
+556
в 0 каналах
Get PRO
май '22
+472
в 0 каналах
Get PRO
апрель '22
+776
в 0 каналах
Get PRO
март '22
+212
в 0 каналах
Get PRO
февраль '22
+556
в 0 каналах
Get PRO
январь '22
+647
в 0 каналах
Get PRO
декабрь '21
+1 040
в 0 каналах
Get PRO
ноябрь '21
+448
в 0 каналах
Get PRO
октябрь '21
+842
в 0 каналах
Get PRO
сентябрь '21
+606
в 0 каналах
Get PRO
август '21
+690
в 0 каналах
Get PRO
июль '21
+1 129
в 0 каналах
Get PRO
июнь '21
+769
в 0 каналах
Get PRO
май '21
+771
в 0 каналах
Get PRO
апрель '21
+2 657
в 0 каналах
Get PRO
март '21
+945
в 0 каналах
Get PRO
февраль '21
+409
в 0 каналах
Get PRO
январь '21
+1 729
в 0 каналах
Get PRO
декабрь '20
+11 956
в 0 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 21 октября | +2 | |||
| 20 октября | 0 | |||
| 19 октября | +3 | |||
| 18 октября | +5 | |||
| 17 октября | +4 | |||
| 16 октября | +1 | |||
| 15 октября | +2 | |||
| 14 октября | 0 | |||
| 13 октября | +5 | |||
| 12 октября | +9 | |||
| 11 октября | +3 | |||
| 10 октября | +3 | |||
| 09 октября | +4 | |||
| 08 октября | +9 | |||
| 07 октября | +4 | |||
| 06 октября | +3 | |||
| 05 октября | +5 | |||
| 04 октября | +3 | |||
| 03 октября | +4 | |||
| 02 октября | +5 | |||
| 01 октября | +3 |
Посты канала
🧮 Откуда в магазинах вес 0.7000000000000001 кг
Такие числа никто не вводит руками. Их посчитал JavaScript, а округлить забыли.
Number в JavaScript хранится в двоичном виде, в 64 битах. Как 1/3 не записать конечной десятичной дробью, так 0.1 не записать конечной двоичной: 0.000110011… и дальше без конца.
Поэтому хранится ближайшее число, которое влезает в 64 бита:
(0.1 + 0.2).toFixed(20);
// "0.30000000000000004441"(0.1 + 0.2) === 0.3 даёт false.
Округлить через toFixed() кажется решением, но и тут ловушка: (1.005).toFixed(2) вернёт "1.00", потому что внутри это число чуть меньше 1.005.
В оригинале по шагам разобран перевод 0.1 в двоичный код и то, как безопасно сравнивать числа и считать деньги.
👍 - если было полезно
👉 @seniorFront| 2 |  Пятница, 17:30. Макет почти готов
Но один сценарий всё ещё вызывает вопросы. Обсудить сейчас или вернуться в понедельник?
Решайте вместе с командой hh.ru в «Охэхэнных новостях».
Подписаться
#реклама
О рекламодателе | 725 |
| 3 |  🎨 Свой скроллбар, который двигает CSS, а не JS
Нативную полосу прокрутки почти не стилизуешь, поэтому её рисуют сами. Обычно ползунок двигают в JS: слушают scroll, читают scrollHeight, меняют DOM, а чтение размеров может вызывать перерасчёт раскладки.
Идея статьи: отдать это scroll-driven animations, то есть анимациям, которые идут по прокрутке, а не по времени. Родную полосу прячут через scrollbar-width: none, а у своей анимируют две CSS-переменные: верхний и нижний край ползунка. Размер задаёт хитрость с animation-range, и ползунок занимает ровно долю видимой части.
Колесо, клавиатура и тач работают сами, JS нужен только для перетаскивания.
Оговорка: на момент публикации это работало в Chrome и Safari, а в Firefox только в Nightly.
👍 - если было полезно
👉 @seniorFront | 911 |
| 4 |  ⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(117 видео, 53 книги) — ВАЙБКОД
(174 видео, 91 книги) — DevOps
(415 видео, 68 книги) — Frontend
(137 видео, 93 книги) — DS/ML
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram | 926 |
| 5 |  🧩 Компонент рисует, хук думает
В React-компоненте разметка часто перемешана с подготовкой данных: проверками, вычислениями, обработкой ошибок. JSX от этого читается тяжело.
Статья на Хабре предлагает идею, подсмотренную во Vue 3: вынести подготовку в хук с именем useSetup[Component]. Для панели профиля ProfilePanel это useSetupProfilePanel. Он отдаёт флаг isLoading и готовые пропсы для карточки, а в компоненте остаётся только разметка.
Тесты от этого тоже упрощаются. В тесте компонента хук подменяется моком (vi.mock из Vitest), и проверяется одно: попали ли пропсы из хука в нужный элемент. Логику самого хука проверяют его собственные тесты.
Важно понимать, что shallow-тест через Shallowly (библиотеку автора статьи) не делает полный рендер. Дочерний компонент не выполняется, поэтому клики и изменения DOM проверяет отдельный DOM-тест.
В статье весь путь от исходного компонента до шести тестов и репозиторий, чтобы запустить их у себя.
👍 - если было полезно
👉 @seniorFront | 1 004 |
| 6 |  Электрический краскопульт ЗУБР 750 Вт КПЭ-750
Сопло увеличенного диаметра. Высокая производительность. Успейте приобрести!
Узнать больше
#реклама
vseinstrumenti.ru
О рекламодателе | 449 |
| 7 |  +4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew | 1 315 |
| 8 |  🔍 Chrome ругается «Blocked aria-hidden»? Не глушите его
Обычно это всплывает при закрытии модалки. Окно уже помечено aria-hidden="true", а фокус ещё на кнопке «Закрыть» внутри. Атрибут прячет элемент от скринридера, но не от Tab, и фокус застревает там, чего для скринридера «нет».
Популярный фикс blur() чистит консоль, но роняет фокус на <body>. Пользователь скринридера слышит тишину и листает Tab с самого начала страницы.
Чинится это порядком действий. Сначала фокус возвращается на кнопку, которая открыла окно, и только потом окно прячется. На время анимации закрытия окну ставят inert: оно выпадает из Tab, и скринридер его не видит.
Подвох в том, что inert блокирует и фокус. Если фон за окном был inert, снимите его до focus(), иначе фокус молча не переедет.
В статье разобраны четыре сценария этой ошибки и готовый код для чистого JS и React.
👉 @seniorFront | 1 177 |
| 9 |  ✨ Подсветка текущего раздела в оглавлении без JavaScript
На длинной странице оглавление может подсвечивать раздел, который вы сейчас читаете. Этот приём зовут scrollspy, и обычно он держится на JavaScript, например на IntersectionObserver.
Новое CSS-свойство scroll-target-group делает это без скриптов. Ставим его на обёртку с якорными ссылками:
.toc {
scroll-target-group: auto;
}
Теперь браузер сам связывает каждую ссылку с её разделом. Ссылка на раздел, который сейчас на экране, получает псевдокласс :target-current, и её остаётся только покрасить. Для пунктов выше и ниже есть :target-before и :target-after.
Пока это работает только в браузерах на Chromium, Firefox и Safari не поддерживают. Но там остаётся обычный список ссылок, так что навигация не ломается.
В статье к этому добавляют линию, которая плавно доезжает до текущего пункта через anchor positioning.
👉 @seniorFront | 1 223 |
| 10 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться | 1 162 |
| 11 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 985 |
| 12 |  🔴В 2025 году Россияне заработали 5,3 млрд рублей на арбитраже криптовалют
По данным Минфин 32% граждан покинули своё место работы поскольку уже в первый месяц смогли заработать 250 000 рублей, а через 2-3 месяца с легкостью вышли на семизначные числа.
Самое смешное, что лишь 8% россиян что-то слышали об этой профессии хотя все инструкции бесплатно лежат на канале Арбитраж Криптовалют
Там объясняют, как имея телефон и доступ в интернет заработать свои первые $3000. Причём разжёвывают так доступно, что поймёт даже ребенок. Кстати, на канале сегодня вышла новая рабочая связка!
Ссылка для входа — https://t.me/+GY-3aS-FN5c0Yjhi | 1 256 |
| 13 |  🪄 Один URL: из списка открывается modal, по прямой ссылке целая страница
Если modal с деталями хранится только в useState, адрес не меняется. Ссылкой не поделиться, после reload снова список.
В Next.js App Router можно иначе. Страница events/[id] работает сама по себе. А рядом в layout живёт слот @modal (в URL он не попадает) с перехватчиком того же адреса:
@modal/
(.)events/
[id]/
page.tsx
Префикс (.) значит «перехватить events/[id] на том же уровне». Переход по Link без перезагрузки перехватывается, и детали рисуются поверх списка. Прямая ссылка или reload перехват не включают: открывается полная страница с metadata и canonical.
Подвох: слоту нужен default.tsx, возвращающий null. Без него при прямом открытии @modal остаётся без маршрута, и можно получить 404.
В статье разобрано, как после закрытия вернуть пользователя на ту же страницу поиска со всеми фильтрами.
👉 @seniorFront | 1 183 |
| 14 |  🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока файл картинки грузится, тег img занимает на странице ноль места. Потом картинка приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер тратит процессорное время на пересчёт раскладки, а читатель теряет строку, которую читал.
Лечится это заранее заданными пропорциями. У тега указываем width=800 height=600, а в CSS пишем width: 100% и height: auto. Картинка растянется на ширину контейнера, а высоту браузер вычислит из пропорции 800×600 ещё до загрузки файла. Место зарезервировано, ничего не дёргается.
В демо-замере из статьи это сэкономило около 12% процессорного времени.
Не забудьте про height: auto: без него картинки растягиваются неправильно.
В статье ещё разобраны старые трюки с padding-bottom и aspect-ratio и объяснено, почему они проигрывают простым атрибутам.
👉 @seniorFront | 1 323 |
| 15 |  🔗 Линия между двумя блоками без JavaScript
Линия между двумя карточками сама тянется за ними, когда они двигаются. Скрипт для расчёта координат не нужен.
Это CSS Anchor Positioning: элемент с anchor-name становится якорем, а блок с position: absolute привязывает к нему свои стороны через anchor(), даже при разных родителях.
Главный трюк: привязать противоположные стороны блока к двум разным якорям, и он растянется между ними:
.anchor--one { anchor-name: --a1; }
.anchor--two { anchor-name: --a2; }
.route--one {
position: absolute;
left: anchor(--a1 right);
right: anchor(--a2 left);
top: anchor(--a1 center);
bottom: anchor(--a2 center);
}
В фон кладём SVG с диагональю и background-size: 100% 100%. В самом SVG нужен preserveAspectRatio="none", иначе линия не растянется по обеим осям.
👉 @seniorFront | 1 461 |
| 16 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 874 |
| 17 |  🔍 Почему overflow: hidden не удерживает размытие
Свойство backdrop-filter: blur() размывает всё, что видно сквозь полупрозрачный элемент. Так делают эффект матового стекла. Снимок фона браузер берёт из готовой GPU-текстуры (compositing layer), а не из DOM. Кто чей родитель, ему неважно.
В статье есть живой пример. Карточки с blur(70px) лежат в scroll-контейнере с overflow: hidden, а снаружи стоит яркая кнопка PLAY. Карточка подъезжает к кнопке ближе чем на 70px и начинает светиться её цветом.
Дело в том, что overflow: hidden обрезает на этапе paint, а размытие работает позже, на этапе composite. Помогает clip-path: inset(0) на контейнере: автор называет его единственным надёжным способом.
Только помните, что clip-path обрежет всё содержимое контейнера, включая дочерние элементы, которые выходят за его край.
В статье ещё три бага в Safari и на iPhone и разбор, почему большой радиус blur так дорого обходится GPU.
👉 @seniorFront | 1 725 |
| 18 |  +65 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGdRKcm ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 1 |
| 19 |  🔑 Обработчик postMessage без проверок слушается кого угодно
Виджет в iframe (комментарии, форма оплаты) не может сам растянуться на странице. Поэтому он шлёт родителю сообщение через postMessage, а родитель в обработчике message выставляет iframe новую высоту.
Подвох в том, что браузер доставит сообщение от любого окна, у которого есть ссылка на ваше. Чужая страница одной строкой пришлёт { type: 'resize', height: 1 }, и виджет схлопнется до одного пикселя.
Спасает строгое сравнение event.origin с ожидаемым адресом. Это поле заполняет сам браузер, и отправитель не может его подделать.
if (event.origin !== WIDGET_ORIGIN) return;
Но origin говорит, с какого сайта пришло сообщение, а не из какого окна. Два iframe с одного домена пройдут проверку оба, и сообщение от одного изменит размер другого.
Как это закрыть через event.source и что ещё проверить в самих данных (вроде height: 1e9), автор показывает на живых демо с тремя атаками.
👉 @seniorFront | 1 629 |
| 20 |  📐 Как заменить CSS progress(), пока его поддерживают не везде
Функция progress() показывает, где значение лежит между двумя границами, и возвращает число от 0 до 1. Формула простая: (значение - начало) / (конец - начало).
Но поделить 180px на 880px и получить просто число умеют не все браузеры: Firefox, например, пока нет. Выручает tan(atan2()). Функция atan2() по сути сама делит первый аргумент на второй, а tan() отдаёт обычное число без единиц.
--progress: tan(atan2(500px - 320px, 1200px - 320px));
Так мы узнаём, где 500px между 320px и 1200px. Чтобы результат не выходил за пределы от 0 до 1, как у progress(), оберните его в clamp().
С разными единицами, например vw и px, трюк кроссбраузерно не сработает. Зарегистрируйте ширину экрана через @property как <length>, и браузер сам переведёт её в пиксели.
Как быть, если границы заданы в rem, и какой вариант выбрать под ваши единицы, автор разбирает в статье.
👉 @seniorFront | 1 499 |
