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
+76
в 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 жовтня | +1 | |||
| 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 |
Дописи каналу
Пятница, 17:30. Макет почти готов
Но один сценарий всё ещё вызывает вопросы. Обсудить сейчас или вернуться в понедельник?
Решайте вместе с командой hh.ru в «Охэхэнных новостях».
Подписаться
#реклама
О рекламодателе
| 2 |  🎨 Свой скроллбар, который двигает CSS, а не JS
Нативную полосу прокрутки почти не стилизуешь, поэтому её рисуют сами. Обычно ползунок двигают в JS: слушают scroll, читают scrollHeight, меняют DOM, а чтение размеров может вызывать перерасчёт раскладки.
Идея статьи: отдать это scroll-driven animations, то есть анимациям, которые идут по прокрутке, а не по времени. Родную полосу прячут через scrollbar-width: none, а у своей анимируют две CSS-переменные: верхний и нижний край ползунка. Размер задаёт хитрость с animation-range, и ползунок занимает ровно долю видимой части.
Колесо, клавиатура и тач работают сами, JS нужен только для перетаскивания.
Оговорка: на момент публикации это работало в Chrome и Safari, а в Firefox только в Nightly.
👍 - если было полезно
👉 @seniorFront | 759 |
| 3 |  ⚡️ В сети начали массово сливать 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 | 806 |
| 4 |  🧩 Компонент рисует, хук думает
В React-компоненте разметка часто перемешана с подготовкой данных: проверками, вычислениями, обработкой ошибок. JSX от этого читается тяжело.
Статья на Хабре предлагает идею, подсмотренную во Vue 3: вынести подготовку в хук с именем useSetup[Component]. Для панели профиля ProfilePanel это useSetupProfilePanel. Он отдаёт флаг isLoading и готовые пропсы для карточки, а в компоненте остаётся только разметка.
Тесты от этого тоже упрощаются. В тесте компонента хук подменяется моком (vi.mock из Vitest), и проверяется одно: попали ли пропсы из хука в нужный элемент. Логику самого хука проверяют его собственные тесты.
Важно понимать, что shallow-тест через Shallowly (библиотеку автора статьи) не делает полный рендер. Дочерний компонент не выполняется, поэтому клики и изменения DOM проверяет отдельный DOM-тест.
В статье весь путь от исходного компонента до шести тестов и репозиторий, чтобы запустить их у себя.
👍 - если было полезно
👉 @seniorFront | 951 |
| 5 |  Электрический краскопульт ЗУБР 750 Вт КПЭ-750
Сопло увеличенного диаметра. Высокая производительность. Успейте приобрести!
Узнать больше
#реклама
vseinstrumenti.ru
О рекламодателе | 449 |
| 6 |  +4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew | 1 250 |
| 7 |  🔍 Chrome ругается «Blocked aria-hidden»? Не глушите его
Обычно это всплывает при закрытии модалки. Окно уже помечено aria-hidden="true", а фокус ещё на кнопке «Закрыть» внутри. Атрибут прячет элемент от скринридера, но не от Tab, и фокус застревает там, чего для скринридера «нет».
Популярный фикс blur() чистит консоль, но роняет фокус на <body>. Пользователь скринридера слышит тишину и листает Tab с самого начала страницы.
Чинится это порядком действий. Сначала фокус возвращается на кнопку, которая открыла окно, и только потом окно прячется. На время анимации закрытия окну ставят inert: оно выпадает из Tab, и скринридер его не видит.
Подвох в том, что inert блокирует и фокус. Если фон за окном был inert, снимите его до focus(), иначе фокус молча не переедет.
В статье разобраны четыре сценария этой ошибки и готовый код для чистого JS и React.
👉 @seniorFront | 1 100 |
| 8 |  ✨ Подсветка текущего раздела в оглавлении без 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 163 |
| 9 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться | 1 098 |
| 10 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 985 |
| 11 |  🔴В 2025 году Россияне заработали 5,3 млрд рублей на арбитраже криптовалют
По данным Минфин 32% граждан покинули своё место работы поскольку уже в первый месяц смогли заработать 250 000 рублей, а через 2-3 месяца с легкостью вышли на семизначные числа.
Самое смешное, что лишь 8% россиян что-то слышали об этой профессии хотя все инструкции бесплатно лежат на канале Арбитраж Криптовалют
Там объясняют, как имея телефон и доступ в интернет заработать свои первые $3000. Причём разжёвывают так доступно, что поймёт даже ребенок. Кстати, на канале сегодня вышла новая рабочая связка!
Ссылка для входа — https://t.me/+GY-3aS-FN5c0Yjhi | 1 136 |
| 12 |  🪄 Один 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 145 |
| 13 |  🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока файл картинки грузится, тег img занимает на странице ноль места. Потом картинка приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер тратит процессорное время на пересчёт раскладки, а читатель теряет строку, которую читал.
Лечится это заранее заданными пропорциями. У тега указываем width=800 height=600, а в CSS пишем width: 100% и height: auto. Картинка растянется на ширину контейнера, а высоту браузер вычислит из пропорции 800×600 ещё до загрузки файла. Место зарезервировано, ничего не дёргается.
В демо-замере из статьи это сэкономило около 12% процессорного времени.
Не забудьте про height: auto: без него картинки растягиваются неправильно.
В статье ещё разобраны старые трюки с padding-bottom и aspect-ratio и объяснено, почему они проигрывают простым атрибутам.
👉 @seniorFront | 1 183 |
| 14 |  🔗 Линия между двумя блоками без 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 371 |
| 15 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 874 |
| 16 |  🔍 Почему 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 704 |
| 17 |  +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 |
| 18 |  🔑 Обработчик 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 607 |
| 19 |  📐 Как заменить 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 471 |
| 20 |  📜 Страница скроллится, а window.scrollY показывает 0
У каждой страницы есть главный контейнер прокрутки, root scroller. Только он получает восстановление позиции при возврате «назад», прокрутку пробелом и стрелками, сворачивание адресной строки на телефоне.
Потерять его легко. Вот частая комбинация:
html,
body {
height: 100%;
overflow-x: hidden;
}
Из-за overflow-x: hidden по вертикали у body получается auto. А height: 100% делает body ровно в высоту экрана. Теперь прокручивается body, а не страница. Внешне всё как раньше, ошибок нет.
Проверить просто: прокрутите вниз и выполните в консоли window.scrollY. Ноль значит, что скроллится что-то другое.
Вложенные контейнеры прокрутки сами по себе нормальны, например для сайдбара или чата. Проблема, только когда такой контейнер занимает весь экран.
В статье разобрано, как сделать липкую шапку, футер внизу и блокировку прокрутки под модалкой, не теряя root scroller.
👉 @seniorFront | 1 478 |
