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 446 名订阅者，在 技术与应用 类别中位列第 5 670，并在 俄罗斯 地区排名第 27 878 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 23 446 名订阅者。
根据 12 十一月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -336，过去 24 小时变化为 -8，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 5.38%。内容发布后 24 小时内通常能获得 2.88% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 1 262 次浏览，首日通常累积 675 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 2。
- 主题关注点： 内容集中在 css, node.js, api, архитектура, html 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
凭借高频更新（最新数据采集于 13 十一月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
23 446
订阅者
-824 小时
-737 天
-33630 天
正在加载数据
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
十一月 '2611月 '26
十一月 '26
+28
在0个频道中
十月 '26
+90
在2个频道中
Get PRO
九月 '26
+100
在11个频道中
Get PRO
八月 '26
+104
在1个频道中
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个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 13 十一月 | +1 | |||
| 12 十一月 | +3 | |||
| 11 十一月 | +2 | |||
| 10 十一月 | 0 | |||
| 09 十一月 | +1 | |||
| 08 十一月 | 0 | |||
| 07 十一月 | +1 | |||
| 06 十一月 | +4 | |||
| 05 十一月 | +3 | |||
| 04 十一月 | +6 | |||
| 03 十一月 | +1 | |||
| 02 十一月 | +6 | |||
| 01 十一月 | 0 |
频道帖子
📍 Как вернуть геолокацию, от которой пользователь однажды отказался
Обычный сценарий: сайт запрашивает координаты через
navigator.geolocation.getCurrentPosition(), человек жмёт «Блокировать» и просит браузер запомнить выбор. С этого момента кнопка на сайте просто молча не работает. Чтобы передумать, надо искать сайт в настройках браузера.
В HTML появился элемент-кнопка <geolocation>. Нажатие на него либо сразу срабатывает, либо снова показывает запрос. Пунктов там два: «разрешить всегда» и «разрешить один раз». Отказ теперь означает просто закрыть окно, поэтому сайт не застревает в вечном запрете.
В анонсе Chrome приводят данные ZapImóveis: 54,4% пользователей, ранее заблокировавших доступ, разрешили его, увидев элемент.
Оговорка: пока элемент работает только в Chrome и родственных браузерах. В остальных срабатывает запасной вызов старого API, и там проблема остаётся.
Автор предполагает, что для камеры и микрофона с похожим <usermedia> это ещё важнее.
👍 - если было полезно
👉 @seniorFront| 2 |  🎢 Галерея, где правая колонка фото обгоняет левую, и без JavaScript
Сам скролл никто не трогает, это иллюзия. Правой колонке дают обычную CSS-анимацию сдвига по вертикали. Только её прогресс зависит не от времени, а от прокрутки: animation-timeline: scroll(root block) привязывает его ко всей странице.
@keyframes drift-up {
from {
transform: translateY(12vh);
}
to {
transform: translateY(-20vh);
}
}
Пока страница прокручивается до конца, колонка дополнительно уезжает вверх. Поэтому кажется, что она движется быстрее соседней.
Scroll-Driven Animations есть не во всех браузерах, так что правило обёрнуто в @supports. Без поддержки останется обычная галерея из двух колонок.
В статье ещё лёгкий зум каждого фото при прокрутке и вариант, где колонка едет навстречу скроллу.
👍 - если было полезно
👉 @seniorFront | 808 |
| 3 |  Яндекс Музыка до 360 дней бесплатно
Яндекс Музыка для вас и 3-х ваших близких.
Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс.
Попробуйте бесплатно❤️
Слушать
#реклама 18+
music.yandex.ru
О рекламодателе | 827 |
| 4 | Пишешь на JavaScript, но до Angular руки так и не дошли?
Слышал про Angular, но всё никак не находилось времени разобраться? Или просто не знал, с чего начать?🤔
Есть возможность попробовать его сразу на практике, без долгих поисков туториалов. На бесплатном 7-дневном интенсиве ты будешь шаг за шагом создавать веб-сервис доставки: с главной страницей, оформлением заказа и его отслеживанием.
Заодно поработаешь с HTML, CSS, JavaScript, попробуешь TypeScript и Angular и увидишь, как всё это объединяется в одном проекте.
Никаких вложений — просто приходи, пробуй и разбирайся, твоё это или нет.
↗️ Попробовать бесплатно
Реклама. ИП Чернова О.А., ИНН:771399721044 | 869 |
| 5 |  🎨 Контурная фигура с градиентом в три строки CSS
Нужна звезда или стрелка, у которой виден только контур, да ещё и залитый градиентом? Автор сайта css-tip.com показывает, как обойтись без хаков и сложного кода: хватает связки border-shape и border-area.
Рамка делается прозрачной. border-shape задаёт её форму: она идёт не по прямоугольнику, а по фигуре из shape(), polygon() и подобных функций. Градиент кладётся в background с ключевым словом border-area и закрашивает только саму рамку.
.shape-gradient { border: 10px solid #0000; /* a transparent border */ border-shape: shape() | polygon() | etc; /* the shape */ background: linear-gradient(#0077b6,#f4a261) border-area; /* gradient + border-area */}
Вместо shape() | polygon() | etc подставляете одну свою фигуру.
Есть важная оговорка: пока это работает только в браузерах на Chromium.
В демо на CodePen к заметке собраны сложные фигуры, нарисованные этим приёмом.
👍 - если было полезно
👉 @seniorFront | 875 |
| 6 |  🧱 Плитка как в Pinterest на чистом CSS, без JS и подсчёта высот
Masonry — раскладка, где карточки разной высоты плотно стоят в колонках без дыр. Раньше для неё брали Masonry.js или хак на Grid с заранее известными высотами.
Теперь в CSS есть display: grid-lanes: колонки задаются как в Grid, а раскладку делает браузер.
.masonry {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
Колонок столько, сколько влезет, каждая не уже 14rem. Следующая карточка обычно идёт в самую короткую колонку, общих рядов нет.
В прод пока рано: grid-lanes работает в Safari 26.4 и новее, в остальных браузерах поддержка ещё в пути, а спецификация остаётся черновиком. Автор советует держать запасную раскладку попроще.
👍 - если было полезно
👉 @seniorFront | 1 006 |
| 7 |  Максимальная скидка года на английский: –22% до 11.11
70% обучения — разговорная практика. Заговорите с первого урока вне зависимости от уровня
Записаться онлайн
#реклама 16+
practicum.yandex.ru
О рекламодателе | 895 |
| 8 |  ✅ В CSS есть true и false, и на них можно строить логику
Слова true и false в CSS уже есть, например в inherits у @property. Их можно положить в кастомное свойство и проверять в style-запросах контейнера.
Пример из статьи: фильтр сумок на двух чекбоксах. Свойства --isBackpack и --isDuffel регистрируют через @property с syntax: "true | false" и false по умолчанию. На :root правило :has(#isBackpack:checked) ставит свойству true.
Дальше вместо горы селекторов с :checked и :not(:checked) пишем одно понятное условие:
@container root style(--isBackpack: true) and style(--isDuffel: false)
Внутри прячем всё, кроме рюкзаков.
Свойства сделаны ненаследуемыми. Поэтому :root нужно дать container-name: root, иначе запросу в глубоком потомке не на кого сослаться.
Весь фильтр со всеми комбинациями чекбоксов разобран в статье.
👍 - если было полезно
👉 @seniorFront | 1 122 |
| 9 |  Зарабатывайте на установках Яндекс Браузера
Рекомендуйте Яндекс Браузер и поиск Яндекса и зарабатывайте до 600 ₽ за каждого привлечённого пользователя.
Партнёрская программа для каждого: от мастера по ремонту ПК до блогера — это возможность получать дополнительный доход от того, что вы уже делаете.
– Бонусы для ваших пользователей и клиентов
– Удобные инструменты для работы офлайн и онлайн
– Наглядная статистика и стабильные выплаты
Предлагайте приложения Яндекса своим читателям и клиентам в вашем блоге, сервисном центре или на сайте — и получайте вознаграждения.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 819 |
| 10 |  🎲 В CSS появился random(), и вёрстка может стать чуть живее
Функция random() выдаёт случайное значение прямо в CSS. Раньше для такого брали JS-библиотеку или Sass-цикл, который генерировал сотни строк статичного CSS.
Вы задаёте границы, а браузер сам выбирает значение. Третий аргумент задаёт шаг:
/* Only produces 0px, 15px, 30px, 45px, or 60px */
top: random(0px, 60px, 15px);
В статье на Smashing Magazine слово разбито на отдельные буквы, и каждая получает свой лёгкий наклон и сдвиг. Заголовок выглядит как старая типографская печать, а при наведении буквы выпрямляются.
Поддержка пока не везде. Safari уже умеет, в Chrome функция приходит с версией 156, от Firefox пока только положительные сигналы. Поэтому ровный вариант пишем по умолчанию, а случайность прячем внутрь @supports.
В статье ещё прыгающие буквы, веер карт на скролле и боке из размытых слов.
👍 - если было полезно
👉 @seniorFront | 1 377 |
| 11 |  +4Телеграм канал AI для бизнеса
AI - не будущее. Это настоящее вашего бизнеса.
Телеграм-канал "AI для бизнеса" знает все о внедрении и использовании искусственного интеллекта в бизнесе в России и мира. Только со своими подписчиками канал делится:
- как внедрить искусственный интеллект в реальные бизнес-процессы,
- разборами кейсов: как компании сократили затраты на 30-50% с помощью AI,
- лайфхаками по автоматизации рутинных задач,
- новостями мира AI и разборами трендов.
Сами давно читаем и вам советуем подписаться.
Подписаться
#реклама 16+
О рекламодателе | 818 |
| 12 |  FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на «что выведет консоль»? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
12 ноября - Web Vitals: как измерять и прокачивать. Разберемся, кто такие эти ваши LCP, FCP, INP, CLS. На практике, на демке, научимся, как измерять веб вайтлсы и улучшать
19 ноября - React: решаем лайвкодинги с собесов. Будем разбирать 2 типа задач, с которыми вы можете столкнуться на собесе, посмотрим, какие типичные ловушки вам будут подстраивать и что надо прям зазубрить, чтобы хорошо прошло
26 ноября - AI-разработка фронтенда: реально работающие практики. Покажем концепты и подходы, которые реально спасут вам время, кукуху и не выжрут всю подписку за полчаса.
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Реклама. ИП Райгородский Д.В. ИНН 645395014681 erid: CQH36pWzJqVKkJFHLr1VnRncmUJmC9f2BaG3sM44ZPuMMt | 1 244 |
| 13 |  🧮 Элемент CSS-сетки может сам узнать, в какой он строке и колонке
Возьмём адаптивную сетку с repeat(auto-fill, ...): колонок в ней ровно столько, сколько влезает по ширине. Темани Афиф показывает, как каждый элемент вычисляет свои координаты на чистом CSS, без JavaScript.
Число колонок считается из ширины контейнера (100cqw), ширины колонки и отступа, с округлением вниз. Порядковый номер элемента даёт sibling-index(). Делим номер на число колонок: целая часть станет номером строки --x, остаток номером колонки --y.
При ресайзе всё пересчитывается само. А с новой функцией if() по этим значениям можно красить, например, четвёртую строку (счёт идёт с нуля):
.container > * { background: if(style(--x = 3): red;)}
Условие у трюка одно: колонки должны быть одинаковой ширины. Строки при этом могут быть разной высоты.
В статье есть и выборки посложнее: последняя строка, конец первой строки и даже диагональ.
👍 - если было полезно
👉 @seniorFront | 1 092 |
| 14 |  ✂️ Лишний зазор над колонками убирается одним свойством
В CSS-раскладке на несколько колонок (multicol) часто возникает вопрос: откуда над первой колонкой лишнее пустое место? Это верхний margin первого абзаца. Внутри multicol-контейнера он не схлопывается.
Раньше выход был один: вообще не давать абзацам верхний отступ. Теперь есть свойство margin-trim. Пишем margin-trim: block-start на сам контейнер с колонками, и браузер обрезает верхний отступ у элемента, который стоит в его начале. В Chrome это работает с версии 155.
Подвох в Safari. Он понимает margin-trim с версии 16.4, но только для обычных блоков, а для колонок нет. Поэтому проверка через @supports там проходит, а отступ над колонками всё равно остаётся.
А в обычной блочной раскладке у margin-trim есть и другие полезные применения, и их уже можно пробовать.
👍 - если было полезно
👉 @seniorFront | 1 194 |
| 15 |  🎨 Рваный акварельный край на чистом SVG
Представьте открытку, где рисунок по тапу заливается акварелью. Обычная SVG-маска с градиентом, которая едет снизу вверх, даёт лишь ровную шторку, как в презентации.
Неровный край дают два SVG-фильтра. feTurbulence рисует облачный шум, похожий на разводы. feDisplacementMap сдвигает каждый пиксель маски на величину из этого шума, и прямая кромка становится изрезанной, как береговая линия.
Хитрость в том, что шум стоит на месте, а маска едет сквозь него. Поэтому край меняет форму на ходу: краска то забегает вперёд, то отстаёт, будто впитывается в бумагу.
Есть одна ловушка. Область фильтра по умолчанию всего на 10% больше элемента. Сдвинутые пиксели вылезают за неё, край обрезается по линейке, и эффект пропадает. Область нужно расширить: x="-35%" y="-35%" width="170%" height="170%".
А ещё в статье карандашные линии, которые рисуются сами, золотые искры и звук кисти без единого аудиофайла, и всё без библиотек.
👍 - если было полезно
👉 @seniorFront | 1 269 |
| 16 |  👩💻 Всем программистам посвящается!
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩💻 Frontend — t.me/frontend_ready
👩💻 C/C++ — https://t.me/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Linux — t.me/linux_ready
👩💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования! | 1 283 |
| 17 |  ⚡ React Context без лишних ререндеров
В контексте лежат name и age. Меняется age, и заодно перерисовывается компонент, которому нужен только name. React сравнивает value провайдера целиком, а это каждый раз новый объект. useMemo и React.memo тут не спасают.
Выход в статье простой. Через Context передают не данные, а объект доступа к ним: { get, set, subscribe }. Он создаётся один раз, ссылка не меняется, и сам контекст никого не ререндерит.
Данные живут в useRef. Каждый компонент через useSyncExternalStore подписывается только на своё поле. Ввели возраст, и перерисовался один инпут возраста.
Есть цена: обновление такого стора внутри startTransition всё равно станет блокирующим, в фон его не увести.
В статье объяснено, зачем здесь именно useSyncExternalStore и почему store нельзя заворачивать в useMemo.
👍 - если было полезно
👉 @seniorFront | 1 448 |
| 18 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 559 |
| 19 |  🔑 Один key, и редактор не путает заметки
Quill, WYSIWYG-редактор для браузера, хранит часть состояния внутри себя: выделение и историю undo. React об этом состоянии ничего не знает.
Когда один редактор по очереди показывает разные заметки, React переиспользует его экземпляр. Меняется только value, а выделение и история прошлой заметки остаются внутри Quill.
Решение простое: передать в key id заметки.
<NoteEditorClient
key={note.id}
value={note.contentHtml}
onChange={(nextHtml) =>
updateNoteContent(note.id, nextHtml)
}
/>
Новый key заставляет React размонтировать старый редактор и создать чистый. Состояние предыдущей заметки в следующую не переходит.
Обратная сторона: при каждом переключении история undo начинается с нуля.
В статье этот редактор ещё получает автосохранение после паузы во вводе и режим чтения с подсветкой кода.
👍 - если было полезно
👉 @seniorFront | 1 651 |
| 20 |  🐶 Как пустить элемент гулять по краю блока на чистом CSS
Свойство offset-path задаёт путь, а offset-distance ставит элемент в точку на нём. Путь не обязательно рисовать вручную: подойдёт рамка родителя, offset-path: border-box.
Например, с offset-distance: 20% кружок встаёт на рамку, пройдя пятую часть периметра. Пикселей нет, поэтому при смене размера блока всё подстраивается.
Дальше автор анимирует offset-distance через @keyframes, а значения берёт из CSS-функции random(). Кружок бегает по краю в случайные точки. Сработало, только когда у каждого вызова появился свой ключ вроде --k1.
Главная загвоздка в поддержке: на момент статьи random() есть в Safari, а в Chrome только за флагом. В других браузерах элемент просто стоит на месте, так что пригодится запасной вариант через @supports.
В статье из этого вырастают светящийся шар и собачка, гуляющая по краю блока.
👍 - если было полезно
👉 @seniorFront | 1 428 |
