Веб-страница
Open in Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Show more
Network:📈 Analytical overview of Telegram channel Веб-страница
Channel Веб-страница (@tproger_web) in the Russian language segment is an active participant. Currently, the community unites 22 384 subscribers, ranking 1 356 in the Art & Design category and 29 133 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 22 384 subscribers.
According to the latest data from 29 September, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -190 over the last 30 days and by -5 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 12.89%. Within the first 24 hours after publication, content typically collects 6.10% reactions from the total number of subscribers.
- Post reach: On average, each post receives 2 888 views. Within the first day, a publication typically gains 1 366 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
- Thematic interests: Content is focused on key topics such as css, javascript, html, github, браузер.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Thanks to the high frequency of updates (latest data received on 30 September, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Art & Design category.
22 384
Subscribers
-524 hours
-397 days
-19030 days
Data loading in progress...
Similar Channels
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
September '26Sep '26
September '26
+54
in 9 channels
August '26
+70
in 9 channels
Get PRO
July '26
+61
in 10 channels
Get PRO
June '26
+60
in 4 channels
Get PRO
May '26
+107
in 1 channels
Get PRO
April '26
+46
in 2 channels
Get PRO
March '26
+57
in 3 channels
Get PRO
February '26
+69
in 4 channels
Get PRO
January '26
+81
in 3 channels
Get PRO
December '25
+104
in 5 channels
Get PRO
November '25
+105
in 3 channels
Get PRO
October '25
+90
in 4 channels
Get PRO
September '25
+141
in 2 channels
Get PRO
August '25
+107
in 5 channels
Get PRO
July '25
+216
in 5 channels
Get PRO
June '25
+309
in 9 channels
Get PRO
May '25
+172
in 5 channels
Get PRO
April '25
+105
in 4 channels
Get PRO
March '25
+262
in 10 channels
Get PRO
February '25
+256
in 8 channels
Get PRO
January '25
+222
in 5 channels
Get PRO
December '24
+142
in 6 channels
Get PRO
November '24
+110
in 4 channels
Get PRO
October '24
+90
in 4 channels
Get PRO
September '24
+83
in 4 channels
Get PRO
August '24
+81
in 3 channels
Get PRO
July '24
+134
in 8 channels
Get PRO
June '24
+121
in 13 channels
Get PRO
May '24
+191
in 9 channels
Get PRO
April '24
+231
in 6 channels
Get PRO
March '24
+277
in 10 channels
Get PRO
February '24
+273
in 8 channels
Get PRO
January '24
+211
in 3 channels
Get PRO
December '23
+227
in 8 channels
Get PRO
November '23
+252
in 5 channels
Get PRO
October '23
+169
in 6 channels
Get PRO
September '23
+196
in 0 channels
Get PRO
August '23
+204
in 0 channels
Get PRO
July '23
+173
in 0 channels
Get PRO
June '23
+310
in 0 channels
Get PRO
May '23
+219
in 0 channels
Get PRO
April '23
+196
in 0 channels
Get PRO
March '23
+375
in 0 channels
Get PRO
February '23
+258
in 0 channels
Get PRO
January '23
+517
in 0 channels
Get PRO
December '22
+336
in 0 channels
Get PRO
November '22
+321
in 0 channels
Get PRO
October '22
+475
in 0 channels
Get PRO
September '22
+467
in 0 channels
Get PRO
August '22
+924
in 0 channels
Get PRO
July '22
+793
in 0 channels
Get PRO
June '22
+1 038
in 0 channels
Get PRO
May '22
+984
in 0 channels
Get PRO
April '22
+1 455
in 0 channels
Get PRO
March '22
+2 145
in 0 channels
Get PRO
February '22
+1 447
in 0 channels
Get PRO
January '22
+1 720
in 0 channels
Get PRO
December '21
+386
in 0 channels
Get PRO
November '21
+2 050
in 0 channels
Get PRO
October '21
+1 542
in 0 channels
Get PRO
September '21
+416
in 0 channels
Get PRO
August '21
+893
in 0 channels
Get PRO
July '21
+1 205
in 0 channels
Get PRO
June '21
+605
in 0 channels
Get PRO
May '21
+543
in 0 channels
Get PRO
April '21
+3 001
in 0 channels
Get PRO
March '21
+430
in 0 channels
Get PRO
February '21
+703
in 0 channels
Get PRO
January '21
+304
in 0 channels
Get PRO
December '20
+16 536
in 0 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 30 September | 0 | |||
| 29 September | 0 | |||
| 28 September | +2 | |||
| 27 September | +1 | |||
| 26 September | +1 | |||
| 25 September | 0 | |||
| 24 September | 0 | |||
| 23 September | 0 | |||
| 22 September | +1 | |||
| 21 September | +3 | |||
| 20 September | 0 | |||
| 19 September | 0 | |||
| 18 September | +1 | |||
| 17 September | +3 | |||
| 16 September | 0 | |||
| 15 September | +3 | |||
| 14 September | +6 | |||
| 13 September | 0 | |||
| 12 September | +2 | |||
| 11 September | +1 | |||
| 10 September | +5 | |||
| 09 September | +2 | |||
| 08 September | +4 | |||
| 07 September | +5 | |||
| 06 September | +1 | |||
| 05 September | +1 | |||
| 04 September | +5 | |||
| 03 September | +3 | |||
| 02 September | +2 | |||
| 01 September | +2 |
Channel Posts
Как проверить поведение CSS, которое не видит @supports
@supports умеет проверить, распознаёт ли браузер объявление, селектор или правило. Но совместный эффект он не проверяет: условие с display: flex и gap проходило даже там, где gap работал только с Grid.
Для таких случаев появился named-feature(). Он принимает заданное имя поведения. Сейчас в спецификации два таких имени: одно проверяет, учитывает ли якорное позиционирование трансформации, другое — умеет ли контейнер прокручиваться только по одной оси.
Сохраните разбор Bramus для постепенного улучшения интерфейса: новая проверка позволяет точнее отделить браузеры с нужным поведением. Перед применением всё равно сверяйте поддержку самой функции и конкретного имени: наборы в браузерах пока различаются.
| 2 |  Как заставить img выйти за собственные границы
У img два размера: размер HTML-элемента и размер ресурса. При object-fit: cover браузер сохраняет пропорции ресурса и масштабирует его до заполнения рамки. Выступающие части по умолчанию скрывает overflow: clip, но значение можно сменить на visible.
С object-fit: none ресурс сохраняет исходный размер, а object-position сдвигает его внутри элемента. На этой разнице автор собирает эффекты наведения, 3D-эффект и анимацию загрузчика без дополнительных элементов и псевдоэлементов.
Я сохранил бы разбор Master.dev Blog с демо на случай, когда HTML менять нельзя. Автор предупреждает: те же демо можно собрать более привычными способами.
#css #html | 1 029 |
| 3 | Кнопка или ссылка: как выбрать HTML-элемент по поведению
Ссылка представляет цель, которую можно открыть в новой вкладке, скопировать, сохранить или отправить. Кнопка запускает действие в текущем контексте. Поэтому переход на другую страницу не превращает элемент в ссылку: поиск, выход из аккаунта и отмена редактирования могут оставаться кнопками.
Если оформить «Отменить» как <a> и покрасить под кнопку, браузер всё равно даст открыть цель отдельно и покажет ссылочное меню. Даже role=button не меняет всех этих свойств.
В разборе Button Actions предложены action и method для button. Они позволят перерисовывать текущую страницу сетевым запросом без формы и JavaScript. Пока это предложение, а для существующих интерфейсов полезен критерий: если цель должна переноситься в другую вкладку или закладку, нужна ссылка; если действие привязано к текущему контексту, кнопка. | 1 123 |
| 4 |  Как связать HTML-атрибуты с адаптивными компонентами в CSS
Расширенный attr() читает data-атрибут как число, длину или CSS-идентификатор. Поэтому data-repeat=4 можно передать в repeat(), а data-gap=2 превратить в 2cqi, то есть отступ в единицах ширины контейнера. Отдельные классы под каждое значение не нужны.
Запросы по стилю контейнера добавляют контекст: карточка проверяет вычисленное CSS-свойство ближайшего предка, например --density: compact, и меняет отступы, размер аватара и видимость описания. Для такого запроса container-type не нужен.
В разборе utilitybend оба механизма соединены в сетке и переключателе плотности. Демо намеренно оставлены без @supports и запасных стилей: перед продакшеном проверьте поддержку и добавьте запасной вариант. | 1 260 |
| 5 |  Как собрать кастомный скроллбар почти целиком на CSS
Обычно размер и положение ползунка приходится пересчитывать в JavaScript на каждом событии прокрутки. В результате код читает размеры контейнера, обновляет DOM и может вызывать перерасчёт вёрстки.
В разборе Master.dev Blog эту работу переносят в CSS. Якорное позиционирование удерживает полосы поверх контейнера, а анимация от прокрутки двигает края ползунка. Контейнерные единицы связывают его высоту с отношением видимой области к полной высоте содержимого. JavaScript остаётся только для перетаскивания указателем; колесо, клавиатура и тач работают через нативную прокрутку.
Подход доступен в Chrome и Safari, а в Firefox пока только в Nightly. Поэтому его стоит брать как прототип для дизайн-системы и отдельно проверять поддержку браузеров и доступность кастомного элемента. | 1 255 |
| 6 |  Почему браузерный поиск не видит текст в аккордеоне
FAQ может исправно открываться и закрываться, а его кнопки работать с клавиатуры, но обычный Ctrl/Cmd+F всё равно провалится. Если закрытый ответ скрыт через display: none, встроенный поиск браузера считает, что этого текста на странице нет.
Добавьте к проверкам простой сценарий: откройте демо в отдельной вкладке, сверните ответ и поищите фразу, которая есть только внутри него. Если совпадения нет, проверки кнопок и открытия ответов покрывают лишь часть поведения компонента.
В разборе Агустина Барриентоса показаны воспроизводимый пример и код, из-за которого поиск не срабатывает.
#html #фронтенд | 1 284 |
| 7 |  В веб-проектах работают не только фронтендеры и бэкендеры, но и дизайнеры, аналитики, продакты. Кто все эти люди (на самом деле очень важные)? Чем они занимаются? Об этом новая мини-подборка. Хорошо почитать, если хочется лучше понимать, какие задачи решает дизайн, что делают аналитики и как работают продуктовые метрики.
Как один лотерейный билет превратился в несколько сотен требований, десятки интеграций и пять месяцев Discovery
Очнуться от мрака метрик: три истории от продакта о том, как решать неочевидные проблемы бизнеса
Как проверять продукт на UX на примере личного кабинета студента
Как тестировать пуши и диплинки в финансовом приложении
Дизайн в маркетинге: как фирменный стиль решает бизнес-задачи | 1 372 |
| 8 |  Как фильтровать ботов в Cloudflare и не мешать пользователям
За неделю сервер PatronView отдал 1,28 млн полных страниц, а браузерная аналитика зарегистрировала 5 977 просмотров: 214 невидимых загрузок на каждый учтённый просмотр. Поэтому сравните серверные логи с браузерным счётчиком, иначе основная нагрузка останется за пределами отчёта.
Автор разделяет блокировки и проверки. Краулеров с невыгодным соотношением запросов к переходам он блокирует по строке User-Agent. Подтверждённых Googlebot и Bingbot освобождает от проверок. Запросам из дата-центров и старых браузеров показывает CAPTCHA, а не закрывает доступ: её смогут пройти пользователи с VPN или облачных рабочих столов.
Сверьте сегменты со своим живым трафиком, прежде чем копировать фильтры. Полные правила собраны в разборе PatronView. | 1 412 |
| 9 |  Как перенести стили с Sass на нативный CSS
Нативный CSS уже умеет переменные, функции и вложенность. Если проект не зависит от специфичных возможностей Sass, переход убирает дублирование между Sass- и CSS-переменными, сгенерированные файлы и зависимость от компилятора.
Начинайте не с переименования .scss в .css. Сначала найдите миксины и функции Sass вроде lighten(), затем замените комментарии // на /* ... */: иначе браузер не разберёт правила после комментария. Только потом удаляйте сгенерированные файлы, меняйте расширения и обновляйте ссылки.
Чеклист миграции Криса Смита стоит открыть перед такой задачей и пройти по нему от поиска файлов до удаления конфигурации компилятора. После сборки проверьте страницы вручную: пропущенное правило может не вызвать ошибку, но незаметно сломать оформление. | 1 400 |
| 10 |  Как убрать одинокий элемент в строке Flexbox
При flex-wrap: wrap последний пункт иногда остаётся один на новой строке. Медиазапрос исправляет конкретный набор элементов, но при изменении содержимого его порог легко перестаёт подходить.
Новая декларация flex-wrap: balance распределяет элементы по строкам равномернее. По статье, она выпущена в Chrome 150 и пока работает только в Chrome. Среди альтернатив: порог ширины через контейнерный запрос, max-width с условным clamp() и группировка через display: contents.
Разбор Ahmad Shadeed пригодится для навигации и рядов иконок: есть код и интерактивные демо. Пока поддержка ограничена, он помогает выбрать компромисс: вычислять порог, заранее знать размеры и число элементов либо добавлять обёртки. | 1 415 |
| 11 |  Как проверять cookie-баннеры на сотнях страниц через Playwright
В Dropbox согласие на cookie превратили в браузерный тест. Аудитор запускает сессии для США и ЕС, а также с сигналом приватности из браузера. Он записывает cookie до выбора, находит элементы управления независимо от 22 языков, отклоняет необязательные cookie, перезагружает страницу и проверяет, сохранился ли выбор.
Детектор адресов удаляет повторы из миллиардов записей о посещениях, группирует страницы с одинаковой логикой согласия и выбирает образцы. Новые страницы не выпадают из проверки.
Схема теста: чистый контекст, cookie до клика, отказ, перезагрузка, повторное сравнение. Правила и исключения держите вне кода, чтобы менять их без релиза. Подробности Dropbox разбирает в инженерном блоге. | 1 419 |
| 12 |  Как рисовать управляемые CSS-треугольники коническим градиентом
Для декоративного треугольника не обязательно рисовать фигуру рамками или обрезать через clip-path. У conic-gradient() можно перенести центр в угол блока, задать направление и жёсткую границу цветов в нужном градусе. При угле меньше 45° цветная область получается треугольной и управляется числами.
Автор применил приём к треугольникам навигации: при наведении менял угол, а linear() добавил фигурам подрагивание. Приём подходит для декоративной графики. Для диаграмм автор советует SVG: отдельным секторам можно добавить интерактивность и сведения для доступности.
В разборе Master.dev Blog есть синтаксис и другие способы построить треугольник. Откройте его, когда форме нужна анимация угла при наведении. | 1 357 |
| 13 |  Как ловить утечки памяти в SPA с помощью Playwright
Обычные сквозные тесты создают новый контекст браузера для каждого сценария, поэтому небольшая утечка не успевает вырасти. Тест на выносливость делает иначе: 200 раз открывает и закрывает одну панель в том же контексте, затем сравнивает число DOM-узлов и обработчиков событий до и после цикла.
Метрики Playwright получает через протокол Chrome DevTools, поэтому приём работает только в Chromium. Таймеры можно проверить с ускоренными часами страницы: 18 секунд на каждом проходе превращают 200 циклов в час работы таймеров.
Из-за разброса показаний такую проверку лучше поставить в ночной запуск. Код soak(), двойную сборку мусора и пример порога для DOM-узлов автор собрал в разборе теста. | 1 438 |
| 14 |  Как читать HTML-реликты из эпохи браузерных войн
В старом head можно встретить строки, смысл которых уже не восстановить по имени. Например, X-UA-Compatible заставлял Internet Explorer выбирать самый новый доступный режим документа, а условные комментарии показывали разную разметку отдельным версиям браузера.
Другие теги защищали страницу от вмешательства сторонних программ. Skype Toolbar превращал номера телефонов в кнопки и мог ломать вёрстку, поэтому сайт отключал его отдельным метатегом. Baidu пропускала мобильные страницы через свой сервис, перестраивала макет, удаляла стили и подменяла рекламу; от этой обработки тоже можно было отказаться в разметке.
Разбор Antiquated HTML Snippets and Artefacts пригодится при ревизии унаследованных шаблонов: сначала выясните, какую интеграцию обслуживала незнакомая строка и существует ли её цель, а затем решайте, удалять ли её. | 7 689 |
| 15 |  Как работает балансировка нагрузки в веб-бэкенде
Балансировщик принимает запрос раньше API и выбирает один из нескольких серверов. Так приложение масштабируется горизонтально: вместо наращивания процессора и памяти одной машины можно добавлять серверы, а при отказе одного остальные продолжат отвечать.
Схема распределения зависит от нагрузки. Циклический алгоритм Round Robin по очереди отправляет запросы на каждый сервер, но не видит, насколько они заняты. Алгоритм наименьшего числа соединений выбирает сервер с наименьшим числом активных подключений и подходит, когда запросы выполняются разное время.
Откройте разбор на DEV Community перед проектированием API: внутри сравнение алгоритмов и уровней балансировки, проверки состояния серверов и привязка сессий. | 1 581 |
| 16 |  Как собрать турнирную сетку FIFA на CSS Grid и subgrid
На странице FIFA каждый столбец раунда вынесен в отдельный элемент: разметка повторяет экран. В разборе макета показана другая структура: один элемент на раунд, внутри две группы матчей по сторонам.
Сетка получает восемь колонок и четыре строки. Вложенный раунд растягивается по ней и через subgrid наследует те же линии, поэтому группы можно поставить в первую и последнюю колонки без отдельных обёрток. Матчи по вертикали автор распределяет с помощью Flexbox: каждый занимает равную долю доступной высоты, и соединительные линии сходятся с центрами карточек.
Откройте этот разбор, когда дизайн требует симметричной схемы, а разметка начинает копировать каждую визуальную колонку. На планшете макет сохраняет структуру с горизонтальной прокруткой, на узком экране все раунды выстраиваются слева. | 2 053 |
| 17 |  Как связать Lottie-анимацию с кликами через DOM
В веб-игрушке Stress Release нужна была точная реакция на клик. Физический движок выдавал правдоподобное движение, но мог подменить заданные кадры расчётами. Поэтому команда выбрала Lottie.
Клик переводят в локальные координаты персонажа, а расстояние до центра вычисляют через Math.hypot(). Оно определяет очки и интенсивность отклика; анимация взрыва появляется в месте нажатия. Код проигрывает через Lottie нужный отрезок кадров, блокирует новые клики до его завершения и возвращает персонажа к циклу ожидания.
В разборе Smashing Magazine есть код расчёта попадания, управления кадрами и изменения размеров через CSS-переменные. Приём пригодится, когда реакция по макету важнее физической симуляции. | 1 600 |
| 18 |  Что делает архитектор решений и как подготовиться к этой роли
Веб-разработчику, который хочет влиять не на один сервис, а на систему целиком, пригодится взгляд архитектора решений. Он переводит бизнес-задачу в набор доработок и связей между системами.
Сначала архитектор разбирает требования на функции, распределяет их по системам и проектирует обмен данными. Итог оформляет в документ с диаграммами систем, интеграций, процессов и ролей. Если пропустить систему, её доработку не учтут в бюджете, а сроки могут сдвинуться.
Перед собеседованием откройте дорожную карту профессии: проверьте знания очередей, баз данных, безопасности и интеграций, затем потренируйтесь задавать уточняющие вопросы и быстро набрасывать схему решения. Там же разобраны онбординг, первый год, рабочий день и перспективы роли. | 1 697 |
| 19 |  Как проверять все пути к res.redirect() в Node.js
В cas-authentication-user 0.3.0 проверка отклоняла внешний returnTo, но брала запасной путь из адреса запроса. url.parse() превращал /\bad.example.com в //bad.example.com, а браузер считал это адресом чужого домена. Исправление одного открытого редиректа оставило второй в той же функции.
Аудит начинайте с res.redirect(): перечислите все входящие значения и проверьте запасную ветку после отказа валидатора. Она работает на атакующем вводе и тоже должна вернуть безопасный адрес.
В 0.4.0 проверяют результат разбора URL, а внешний адрес заменяют на /. В разборе Megapixel99 на DEV Community есть код. Если пакет есть в проекте, обновитесь до 0.4.0. | 1 704 |
| 20 |  Когда ИТ-проекту нужно быстро масштабироваться, а своего железа нет
Знакомая ситуация: публичное облако удобно для большинства сервисов, но для части нагрузок — платёжных систем, хранения персональных данных, соответствия требованиям регуляторов — нужна физическая изоляция. Своё железо эту задачу решает. Но дальше начинается: закупка серверов, настройка гипервизора, разворачивание Kubernetes и постоянное обслуживание всего этого руками команды.
Yandex Cloud анонсировала BareMetal Extend — изолированные физические серверы с уже развёрнутой инфраструктурой под конкретные задачи:
— Extend: Virtualization — виртуальные машины и распределённое хранилище под backend и базы данных;
— Extend: Stackland — деплой и управление веб-приложениями и сервисами;
— Extend: Managed Service for Kubernetes® — кластер под контейнеризованные сервисы и микросервисную архитектуру.
Подходит, например, когда:
— части сервиса (платежи, персональные данные) нужна физическая изоляция;
— важна предсказуемая производительность под пиковые нагрузки — распродажи, релизы, всплески трафика;
— текущим серверам не хватает мощности под растущий трафик;
— нужна гибридная схема — часть в облаке, часть на своих серверах;
— команда хочет заниматься продуктом, а не настройкой и поддержкой инфраструктуры.
Инфраструктура предоставляется уже собранной и проверенной на совместимость — это снижает риск ошибок конфигурации и разгружает разработчиков от рутины по поддержке серверов.
Если планируете масштабировать ИТ-проект или запускать новый сервис — обсудите задачу с архитекторами Yandex Cloud или оставьте заявку на тестирование BareMetal Extend. | 1 876 |
