Senior Frontend - javascript, html, css
Ir al canal en Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Mostrar más
Red:📈 Análisis del canal de Telegram Senior Frontend - javascript, html, css
El canal Senior Frontend - javascript, html, css (@seniorfront) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 23 668 suscriptores, ocupando la posición 5 576 en la categoría Tecnologías y Aplicaciones y el puesto 27 684 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 23 668 suscriptores.
Según los últimos datos del 21 octubre, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -249, y en las últimas 24 horas de -12, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 6.28%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 2.95% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 1 488 visualizaciones. En el primer día suele acumular 699 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 2.
- Intereses temáticos: El contenido se centra en temas clave como css, node.js, api, архитектура, html.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 22 octubre, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
23 668
Suscriptores
-1224 horas
-927 días
-24930 días
Cargando datos
Canales Similares
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
octubre '26oct '26
octubre '26
+79
en 2 canales
septiembre '26
+100
en 11 canales
Get PRO
agosto '26
+104
en 0 canales
Get PRO
julio '26
+91
en 0 canales
Get PRO
junio '26
+112
en 0 canales
Get PRO
mayo '26
+80
en 4 canales
Get PRO
abril '26
+63
en 0 canales
Get PRO
marzo '26
+86
en 0 canales
Get PRO
febrero '26
+123
en 0 canales
Get PRO
enero '26
+121
en 0 canales
Get PRO
diciembre '25
+140
en 1 canales
Get PRO
noviembre '25
+186
en 0 canales
Get PRO
octubre '25
+214
en 0 canales
Get PRO
septiembre '25
+208
en 4 canales
Get PRO
agosto '25
+171
en 0 canales
Get PRO
julio '25
+243
en 0 canales
Get PRO
junio '25
+210
en 8 canales
Get PRO
mayo '25
+211
en 6 canales
Get PRO
abril '25
+220
en 0 canales
Get PRO
marzo '25
+250
en 0 canales
Get PRO
febrero '25
+223
en 0 canales
Get PRO
enero '25
+402
en 4 canales
Get PRO
diciembre '24
+304
en 1 canales
Get PRO
noviembre '24
+318
en 8 canales
Get PRO
octubre '24
+570
en 9 canales
Get PRO
septiembre '24
+483
en 0 canales
Get PRO
agosto '24
+518
en 0 canales
Get PRO
julio '24
+413
en 1 canales
Get PRO
junio '24
+375
en 2 canales
Get PRO
mayo '24
+619
en 27 canales
Get PRO
abril '24
+424
en 0 canales
Get PRO
marzo '24
+685
en 14 canales
Get PRO
febrero '24
+610
en 2 canales
Get PRO
enero '24
+706
en 17 canales
Get PRO
diciembre '23
+940
en 45 canales
Get PRO
noviembre '23
+919
en 27 canales
Get PRO
octubre '23
+1 027
en 29 canales
Get PRO
septiembre '23
+1 193
en 0 canales
Get PRO
agosto '23
+515
en 0 canales
Get PRO
julio '23
+543
en 0 canales
Get PRO
junio '23
+550
en 0 canales
Get PRO
mayo '23
+471
en 0 canales
Get PRO
abril '23
+682
en 0 canales
Get PRO
marzo '23
+868
en 0 canales
Get PRO
febrero '23
+720
en 0 canales
Get PRO
enero '23
+940
en 0 canales
Get PRO
diciembre '22
+767
en 0 canales
Get PRO
noviembre '22
+274
en 0 canales
Get PRO
octubre '22
+469
en 0 canales
Get PRO
septiembre '22
+475
en 0 canales
Get PRO
agosto '22
+504
en 0 canales
Get PRO
julio '22
+842
en 0 canales
Get PRO
junio '22
+556
en 0 canales
Get PRO
mayo '22
+472
en 0 canales
Get PRO
abril '22
+776
en 0 canales
Get PRO
marzo '22
+212
en 0 canales
Get PRO
febrero '22
+556
en 0 canales
Get PRO
enero '22
+647
en 0 canales
Get PRO
diciembre '21
+1 040
en 0 canales
Get PRO
noviembre '21
+448
en 0 canales
Get PRO
octubre '21
+842
en 0 canales
Get PRO
septiembre '21
+606
en 0 canales
Get PRO
agosto '21
+690
en 0 canales
Get PRO
julio '21
+1 129
en 0 canales
Get PRO
junio '21
+769
en 0 canales
Get PRO
mayo '21
+771
en 0 canales
Get PRO
abril '21
+2 657
en 0 canales
Get PRO
marzo '21
+945
en 0 canales
Get PRO
febrero '21
+409
en 0 canales
Get PRO
enero '21
+1 729
en 0 canales
Get PRO
diciembre '20
+11 956
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 22 octubre | +2 | |||
| 21 octubre | +2 | |||
| 20 octubre | 0 | |||
| 19 octubre | +3 | |||
| 18 octubre | +5 | |||
| 17 octubre | +4 | |||
| 16 octubre | +1 | |||
| 15 octubre | +2 | |||
| 14 octubre | 0 | |||
| 13 octubre | +5 | |||
| 12 octubre | +9 | |||
| 11 octubre | +3 | |||
| 10 octubre | +3 | |||
| 09 octubre | +4 | |||
| 08 octubre | +9 | |||
| 07 octubre | +4 | |||
| 06 octubre | +3 | |||
| 05 octubre | +5 | |||
| 04 octubre | +3 | |||
| 03 octubre | +4 | |||
| 02 octubre | +5 | |||
| 01 octubre | +3 |
Publicaciones del Canal
🎯 Почему иконка рядом с текстом встаёт криво
По умолчанию иконка в строке садится на базовую линию шрифта и смотрится задранной. Flexbox ставит её в математический центр, но и это мимо: у шрифта разный запас «воздуха» над буквами и под ними.
Армен Аллахвердян из дизайн-системы Авито предлагает другой ориентир: оптический центр, то есть середину между базовой линией и верхом заглавных букв. Высоту заглавных в CSS даёт юнит cap.
Иконку абсолютно кладут в пустой inline-block span, который сидит на базовой линии. Дальше одна формула:
bottom: calc((1cap - var(--icon-height)) / 2);| 2 |  🧮 Откуда в магазинах вес 0.7000000000000001 кг
Такие числа никто не вводит руками. Их посчитал JavaScript, а округлить забыли.
Number в JavaScript хранится в двоичном виде, в 64 битах. Как 1/3 не записать конечной десятичной дробью, так 0.1 не записать конечной двоичной: 0.000110011… и дальше без конца.
Поэтому хранится ближайшее число, которое влезает в 64 бита:
(0.1 + 0.2).toFixed(20);
// "0.30000000000000004441"
Оба слагаемых чуть больше настоящих, сумма округляется ещё выше, а 0.3 хранится чуть меньше. Отсюда (0.1 + 0.2) === 0.3 даёт false.
Округлить через toFixed() кажется решением, но и тут ловушка: (1.005).toFixed(2) вернёт "1.00", потому что внутри это число чуть меньше 1.005.
В оригинале по шагам разобран перевод 0.1 в двоичный код и то, как безопасно сравнивать числа и считать деньги.
👍 - если было полезно
👉 @seniorFront | 878 |
| 3 |  Пятница, 17:30. Макет почти готов
Но один сценарий всё ещё вызывает вопросы. Обсудить сейчас или вернуться в понедельник?
Решайте вместе с командой hh.ru в «Охэхэнных новостях».
Подписаться
#реклама
О рекламодателе | 871 |
| 4 |  🎨 Свой скроллбар, который двигает CSS, а не JS
Нативную полосу прокрутки почти не стилизуешь, поэтому её рисуют сами. Обычно ползунок двигают в JS: слушают scroll, читают scrollHeight, меняют DOM, а чтение размеров может вызывать перерасчёт раскладки.
Идея статьи: отдать это scroll-driven animations, то есть анимациям, которые идут по прокрутке, а не по времени. Родную полосу прячут через scrollbar-width: none, а у своей анимируют две CSS-переменные: верхний и нижний край ползунка. Размер задаёт хитрость с animation-range, и ползунок занимает ровно долю видимой части.
Колесо, клавиатура и тач работают сами, JS нужен только для перетаскивания.
Оговорка: на момент публикации это работало в Chrome и Safari, а в Firefox только в Nightly.
👍 - если было полезно
👉 @seniorFront | 986 |
| 5 |  ⚡️ В сети начали массово сливать 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 | 990 |
| 6 |  🧩 Компонент рисует, хук думает
В React-компоненте разметка часто перемешана с подготовкой данных: проверками, вычислениями, обработкой ошибок. JSX от этого читается тяжело.
Статья на Хабре предлагает идею, подсмотренную во Vue 3: вынести подготовку в хук с именем useSetup[Component]. Для панели профиля ProfilePanel это useSetupProfilePanel. Он отдаёт флаг isLoading и готовые пропсы для карточки, а в компоненте остаётся только разметка.
Тесты от этого тоже упрощаются. В тесте компонента хук подменяется моком (vi.mock из Vitest), и проверяется одно: попали ли пропсы из хука в нужный элемент. Логику самого хука проверяют его собственные тесты.
Важно понимать, что shallow-тест через Shallowly (библиотеку автора статьи) не делает полный рендер. Дочерний компонент не выполняется, поэтому клики и изменения DOM проверяет отдельный DOM-тест.
В статье весь путь от исходного компонента до шести тестов и репозиторий, чтобы запустить их у себя.
👍 - если было полезно
👉 @seniorFront | 1 051 |
| 7 |  Электрический краскопульт ЗУБР 750 Вт КПЭ-750
Сопло увеличенного диаметра. Высокая производительность. Успейте приобрести!
Узнать больше
#реклама
vseinstrumenti.ru
О рекламодателе | 449 |
| 8 |  +4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew | 1 375 |
| 9 |  🔍 Chrome ругается «Blocked aria-hidden»? Не глушите его
Обычно это всплывает при закрытии модалки. Окно уже помечено aria-hidden="true", а фокус ещё на кнопке «Закрыть» внутри. Атрибут прячет элемент от скринридера, но не от Tab, и фокус застревает там, чего для скринридера «нет».
Популярный фикс blur() чистит консоль, но роняет фокус на <body>. Пользователь скринридера слышит тишину и листает Tab с самого начала страницы.
Чинится это порядком действий. Сначала фокус возвращается на кнопку, которая открыла окно, и только потом окно прячется. На время анимации закрытия окну ставят inert: оно выпадает из Tab, и скринридер его не видит.
Подвох в том, что inert блокирует и фокус. Если фон за окном был inert, снимите его до focus(), иначе фокус молча не переедет.
В статье разобраны четыре сценария этой ошибки и готовый код для чистого JS и React.
👉 @seniorFront | 1 208 |
| 10 |  ✨ Подсветка текущего раздела в оглавлении без 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 238 |
| 11 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться | 1 186 |
| 12 |  Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе | 985 |
| 13 |  🔴В 2025 году Россияне заработали 5,3 млрд рублей на арбитраже криптовалют
По данным Минфин 32% граждан покинули своё место работы поскольку уже в первый месяц смогли заработать 250 000 рублей, а через 2-3 месяца с легкостью вышли на семизначные числа.
Самое смешное, что лишь 8% россиян что-то слышали об этой профессии хотя все инструкции бесплатно лежат на канале Арбитраж Криптовалют
Там объясняют, как имея телефон и доступ в интернет заработать свои первые $3000. Причём разжёвывают так доступно, что поймёт даже ребенок. Кстати, на канале сегодня вышла новая рабочая связка!
Ссылка для входа — https://t.me/+GY-3aS-FN5c0Yjhi | 1 291 |
| 14 |  🪄 Один 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 195 |
| 15 |  🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока файл картинки грузится, тег img занимает на странице ноль места. Потом картинка приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер тратит процессорное время на пересчёт раскладки, а читатель теряет строку, которую читал.
Лечится это заранее заданными пропорциями. У тега указываем width=800 height=600, а в CSS пишем width: 100% и height: auto. Картинка растянется на ширину контейнера, а высоту браузер вычислит из пропорции 800×600 ещё до загрузки файла. Место зарезервировано, ничего не дёргается.
В демо-замере из статьи это сэкономило около 12% процессорного времени.
Не забудьте про height: auto: без него картинки растягиваются неправильно.
В статье ещё разобраны старые трюки с padding-bottom и aspect-ratio и объяснено, почему они проигрывают простым атрибутам.
👉 @seniorFront | 1 331 |
| 16 |  🔗 Линия между двумя блоками без 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 475 |
| 17 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 874 |
| 18 |  🔍 Почему 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 737 |
| 19 |  +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 |
| 20 |  🔑 Обработчик 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 646 |
