Веб-страница
Открыть в Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Больше
Сеть:📈 Аналитический обзор Telegram-канала Веб-страница
Канал Веб-страница (@tproger_web) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 22 466 подписчиков, занимая 1 336 место в категории Искусство и дизайн и 29 009 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 22 466 подписчиков.
Согласно последним данным от 16 сентября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -162, а за последние 24 часа — -4, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 12.35%. В первые 24 часа после публикации контент обычно набирает 9.71% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 2 775 просмотров. В течение первых суток публикация набирает 2 183 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 4.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как css, javascript, html, github, браузер.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Благодаря высокой частоте обновлений (последние данные получены 17 сентября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Искусство и дизайн.
22 466
Подписчики
-424 часа
-437 дней
-16230 дней
Загрузка данных...
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
сентябрь '26
сентябрь '26
+44
в 8 каналах
август '26
+70
в 9 каналах
Get PRO
июль '26
+61
в 10 каналах
Get PRO
июнь '26
+60
в 4 каналах
Get PRO
май '26
+107
в 1 каналах
Get PRO
апрель '26
+46
в 2 каналах
Get PRO
март '26
+57
в 3 каналах
Get PRO
февраль '26
+69
в 4 каналах
Get PRO
январь '26
+81
в 3 каналах
Get PRO
декабрь '25
+104
в 5 каналах
Get PRO
ноябрь '25
+105
в 3 каналах
Get PRO
октябрь '25
+90
в 4 каналах
Get PRO
сентябрь '25
+141
в 2 каналах
Get PRO
август '25
+107
в 5 каналах
Get PRO
июль '25
+216
в 5 каналах
Get PRO
июнь '25
+309
в 9 каналах
Get PRO
май '25
+172
в 5 каналах
Get PRO
апрель '25
+105
в 4 каналах
Get PRO
март '25
+262
в 10 каналах
Get PRO
февраль '25
+256
в 8 каналах
Get PRO
январь '25
+222
в 5 каналах
Get PRO
декабрь '24
+142
в 6 каналах
Get PRO
ноябрь '24
+110
в 4 каналах
Get PRO
октябрь '24
+90
в 4 каналах
Get PRO
сентябрь '24
+83
в 4 каналах
Get PRO
август '24
+81
в 3 каналах
Get PRO
июль '24
+134
в 8 каналах
Get PRO
июнь '24
+121
в 13 каналах
Get PRO
май '24
+191
в 9 каналах
Get PRO
апрель '24
+231
в 6 каналах
Get PRO
март '24
+277
в 10 каналах
Get PRO
февраль '24
+273
в 8 каналах
Get PRO
январь '24
+211
в 3 каналах
Get PRO
декабрь '23
+227
в 8 каналах
Get PRO
ноябрь '23
+252
в 5 каналах
Get PRO
октябрь '23
+169
в 6 каналах
Get PRO
сентябрь '23
+196
в 0 каналах
Get PRO
август '23
+204
в 0 каналах
Get PRO
июль '23
+173
в 0 каналах
Get PRO
июнь '23
+310
в 0 каналах
Get PRO
май '23
+219
в 0 каналах
Get PRO
апрель '23
+196
в 0 каналах
Get PRO
март '23
+375
в 0 каналах
Get PRO
февраль '23
+258
в 0 каналах
Get PRO
январь '23
+517
в 0 каналах
Get PRO
декабрь '22
+336
в 0 каналах
Get PRO
ноябрь '22
+321
в 0 каналах
Get PRO
октябрь '22
+475
в 0 каналах
Get PRO
сентябрь '22
+467
в 0 каналах
Get PRO
август '22
+924
в 0 каналах
Get PRO
июль '22
+793
в 0 каналах
Get PRO
июнь '22
+1 038
в 0 каналах
Get PRO
май '22
+984
в 0 каналах
Get PRO
апрель '22
+1 455
в 0 каналах
Get PRO
март '22
+2 145
в 0 каналах
Get PRO
февраль '22
+1 447
в 0 каналах
Get PRO
январь '22
+1 720
в 0 каналах
Get PRO
декабрь '21
+386
в 0 каналах
Get PRO
ноябрь '21
+2 050
в 0 каналах
Get PRO
октябрь '21
+1 542
в 0 каналах
Get PRO
сентябрь '21
+416
в 0 каналах
Get PRO
август '21
+893
в 0 каналах
Get PRO
июль '21
+1 205
в 0 каналах
Get PRO
июнь '21
+605
в 0 каналах
Get PRO
май '21
+543
в 0 каналах
Get PRO
апрель '21
+3 001
в 0 каналах
Get PRO
март '21
+430
в 0 каналах
Get PRO
февраль '21
+703
в 0 каналах
Get PRO
январь '21
+304
в 0 каналах
Get PRO
декабрь '20
+16 536
в 0 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 17 сентября | +2 | |||
| 16 сентября | 0 | |||
| 15 сентября | +3 | |||
| 14 сентября | +6 | |||
| 13 сентября | 0 | |||
| 12 сентября | +2 | |||
| 11 сентября | +1 | |||
| 10 сентября | +5 | |||
| 09 сентября | +2 | |||
| 08 сентября | +4 | |||
| 07 сентября | +5 | |||
| 06 сентября | +1 | |||
| 05 сентября | +1 | |||
| 04 сентября | +5 | |||
| 03 сентября | +3 | |||
| 02 сентября | +2 | |||
| 01 сентября | +2 |
Посты канала
Как проверить ограничитель запросов в многопроцессном Node.js
Локальный ограничитель показывает идеальные интервалы, пока сервер получает пачку запросов. В эксперименте с Bottleneck шесть воркеров при настройке на два запроса в секунду сообщали о паузах 495,8 мс, но вместе выдавали серверу 14,04 запроса в секунду.
Библиотека работала по документации:
local не синхронизирует процессы. Контрольный запуск через Redis удержал суммарную частоту на двух запросах в секунду.
Если приложение запущено через Node.js cluster, PM2 в cluster-режиме или несколько контейнеров, проверяйте не отчёт ограничителя, а интервалы прихода на HTTP-сервер. Намеренно отключите координацию и убедитесь, что тест замечает всплеск. Иначе заданный предел окажется пределом для каждого процесса.| 2 |  Когда в CSS нужны контейнерные запросы
Медиазапрос смотрит на окно браузера. Поэтому условие min-width: 1024px сработает на экране шириной 1920 пикселей даже для карточки шириной 300 пикселей. Тесному компоненту достанется раскладка для широкого экрана.
Контейнерный запрос проверяет ширину родительской обёртки. Порог 450 пикселей переводит карточку в горизонтальную раскладку. Такой компонент можно переносить в сайдбар, не переписывая условие под ширину окна.
В разборе Smashing Magazine тот же принцип применяют к шрифту: cqi вместе с clamp() масштабирует его относительно контейнера. Оставляйте медиазапросы для структуры страницы, а контейнерные используйте для карточек, форм и виджетов. | 837 |
| 3 |  Как собрать современный CSS reset для нового проекта
В наборе Josh W. Comeau сохранены разумные браузерные стили и добавлена база для предсказуемой вёрстки. box-sizing: border-box включает границы и внутренние отступы в заданную ширину элемента, а внешние отступы сбрасываются у всех элементов, кроме dialog.
Для текста задан межстрочный интервал 1,5 и более аккуратное распределение строк в абзацах и заголовках. Формы наследуют шрифт. Так меньше базовых исключений приходится исправлять в стилях компонентов.
Используйте набор при старте нового проекта. Для существующей кодовой базы автор предупреждает о риске незаметно сломать интерфейс изменением базовых стилей. Если всё же добавляете reset, тщательно протестируйте результат. Код и объяснение каждого правила есть в разборе Josh W. Comeau. | 1 048 |
| 4 |  Как браузер мгновенно восстанавливает страницу при возврате
Кэш переходов назад и вперёд, или bfcache, сохраняет в памяти снимок всей страницы вместе с состоянием JavaScript. Когда пользователь уходит, браузер приостанавливает выполнение кода, а при возврате показывает страницу без запроса к сети. Механизм поддерживают все основные браузеры.
Начните проверку с обработчика unload: на компьютерах Chrome и Firefox он исключает страницу из bfcache. Используйте pagehide, а восстановление отслеживайте через pageshow: свойство event.persisted будет равно true. В одностраничном приложении кэш не ускоряет внутренние переходы без перезагрузки, но помогает при возврате к приложению с другой страницы.
Разбор web.dev пригодится перед аудитом навигации: в нём есть механика кэша, события страницы и ограничения встроенных фреймов. | 1 234 |
| 5 |  Короткая хронология:
2001 — появился SpaceWeb, в аське живёт весь рунет
2005 — Живой Журнал, гостевые книги, счётчики посещений
2010 — торренты, флеш-игры, первые айфоны у всех
2016 — все бегают за покемонами
2020 — жизнь переезжает в Zoom
2026 — SpaceWeb исполняется 25
Анкета проводит по всей этой линии — от первой страницы до промокода в конце. | 1 355 |
| 6 |  Почему большой z-index не поднимает подсказку над шапкой
У подсказки может быть z-index: 999999, а у шапки всего 2, но шапка всё равно окажется сверху. Значения сравниваются не по всей странице, а только внутри одного контекста наложения. Если main создал отдельный контекст с z-index: 1, его дочерняя подсказка не сможет обойти соседний header с z-index: 2.
Контекст появляется не только из-за сочетания position и z-index. Его могут создать opacity меньше единицы, transform, will-change, фиксированное или липкое позиционирование и другие свойства. Поэтому увеличение числа порой напоминает торг с браузером: ставка растёт, результата нет.
В разборе Josh W. Comeau есть интерактивные примеры и схемы контекстов. При отладке пройдите по предкам проблемного элемента: найдите предка, который создал новый контекст, и проверьте его порядок среди соседних контекстов. | 1 383 |
| 7 |  Cloudflare автоматизировала обмен ключами с серверами сайтов
Cloudflare включила Automatic Key Exchange по умолчанию для доменов. Функция касается защищённого соединения между прокси Cloudflare и сайтом. Раньше Cloudflare начинала обмен по TLS 1.3 с X25519; при другом выборе сервера повтор добавлял полный сетевой круг.
Теперь сервис ежедневно проверяет серверы отдельно от рабочего трафика и первой предлагает сильнейший поддерживаемый алгоритм, прежде всего постквантовый X25519MLKEM768. Изменение развёртывают на части трафика и отменяют, если число повторов растёт.
При развёртывании доля повторов снизилась примерно с 52% до 3,7%, а задержка на 90-м процентиле сократилась более чем на 150 мс. Сотни тысяч доменов получили постквантовые соединения без ручной настройки. Разбор Cloudflare пригодится тем, кто отвечает за TLS: в панели можно проверить режим и ограничения по стандартам. | 1 467 |
| 8 |  Как кэшировать HTML, CSS и JavaScript без рассинхронизации
Короткий max-age для изменяемых файлов выглядит компромиссом. Но браузер может оставить старые HTML и JavaScript, удалить CSS из кэша и запросить его заново. Если сервер уже отдаёт новые стили, страница соберётся из несовместимых версий. В тестах это легко пропустить.
Для неизменяемой статики надёжнее менять URL вместе с содержимым, например добавлять хеш, и задавать max-age=31536000. Для HTML подходит no-cache: браузер хранит ответ, но перед использованием сверяет его с сервером через ETag или Last-Modified. Название меткое: кэшировать оно как раз разрешает.
Подробный разбор кэширования пригодится перед настройкой заголовков и service worker. Проверьте, не получают ли изменяемые файлы короткий max-age, а для статики версионируйте URL. | 1 515 |
| 9 |  Почему CORS устроен именно так и как с ним работать
CORS проще отлаживать, если начать не с заголовков ответа, а с границы, которую охраняет браузер. Страница может загрузить картинку, скрипт или стиль с другого источника, но её код не может прочитать DOM чужой страницы или тело ответа. Источник здесь — сочетание схемы, хоста и порта.
Даже если не отправлять cookie, этого недостаточно. Внутренние панели, роутеры и устройства умного дома могут считать защитой саму локальную сеть, поэтому сервер должен явно разрешить чужой странице читать ответ.
Я сохранил разбор CORS с интерактивной песочницей как карту для отладки трёх слоёв: источников, учётных данных и разрешения сервера. | 1 635 |
| 10 |  Как браузер рисует кадры и где теряется плавность
Экран с частотой 60 Гц обновляется каждые 16,66 мс. С учётом работы браузера нужно уложиться в 10 мс: иначе частота кадров падает, а движение начинает дёргаться.
В разборе web.dev путь визуального изменения разделён на расчёт стилей и геометрии, отрисовку пикселей и сборку слоёв. Свойства width, height, left и top заставляют браузер пройти все эти этапы. Для цвета, фонового изображения или тени пересчёт геометрии не нужен. Если свойство не требует и новой отрисовки, браузер сразу собирает готовые слои.
Если анимация дёргается, проверьте в DevTools, какие этапы запускают её CSS-свойства. Начните с тех, что меняют размеры и положение: сокращение лишней работы освобождает время внутри кадра. | 1 591 |
| 11 |  Как INP измеряет отзывчивость веб-страницы
INP, задержка до следующей отрисовки, показывает время от клика, касания или нажатия клавиши до визуального ответа браузера. Оно складывается из ожидания обработчиков, выполнения их кода и подготовки кадра. Обычно в итог попадает самое медленное действие за визит.
Ориентир считают по 75-му процентилю отдельно для мобильных и настольных устройств: до 200 мс включительно считается хорошим результатом, свыше 200 и до 500 мс требует улучшения, свыше 500 мс означает плохую отзывчивость.
Начните с PageSpeed Insights: данные CrUX покажут оценку по реальным визитам. Затем RUM, мониторинг реальных пользователей, поможет найти медленное действие, а лабораторный тест позволит его воспроизвести. В разборе INP на web.dev объясняют, почему метрика иногда отсутствует и чем ограничены лабораторные измерения. | 1 557 |
| 12 | Как stale-while-revalidate отдаёт кэш сразу и обновляет его в фоне
Директива stale-while-revalidate в заголовке Cache-Control разрешает браузеру показать устаревшую копию без ожидания сети. Одновременно браузер запрашивает свежий ответ и сохраняет его для следующего обращения.
На примере max-age=1, stale-while-revalidate=59 механика видна по секундам: первую секунду ответ считается свежим; следующие 59 секунд браузер сразу отдаёт копию и обновляет её в фоне; позже уже ждёт сеть. Такой режим подходит данным, которые запрашивают часто и обновляют по известному расписанию, например погоде или заголовкам новостей.
Я сохранил разбор web.dev как шпаргалку для настройки API: он помогает выбрать интервалы кэширования и заранее решить, насколько устаревший ответ допустим для пользователя. | 1 528 |
| 13 | Как content-visibility ускоряет отрисовку длинных страниц
Если на странице десятки карточек, браузеру необязательно сразу рассчитывать стили и раскладку для всего списка. С content-visibility: auto он пропускает отрисовку содержимого секций за пределами экрана и выполняет её, когда секция приближается к области просмотра.
В примере с блогом время отрисовки сократилось с 232 до 30 мс. Есть цена: без заданного размера пропущенная секция считается пустой, поэтому полоса прокрутки может прыгать. contain-intrinsic-size задаёт размер-заполнитель, а значение auto позволяет затем запомнить фактический размер.
Откройте разбор на web.dev перед оптимизацией ленты или SPA: там показаны CSS-код, ограничения доступности и отличие от display: none и visibility: hidden. | 1 621 |
| 14 |  Почему гидрация React ломается при разном HTML на сервере и в браузере
При серверном рендеринге React отдаёт готовый HTML. Затем браузер гидрирует его: связывает DOM-узлы с компонентами. В этот момент React ожидает ту же структуру, что сформировал сервер, а не ищет и исправляет различия.
Поэтому проверка typeof window внутри рендера опасна. Если на сервере компонент возвращает null, а в браузере сразу добавляет навигацию, структуры HTML расходятся. Иногда React справляется, но гидрация оптимизирована ради скорости, и элементы могут оказаться не на своих местах.
Если интерфейс верен в разработке, но ломается после сборки, а React DevTools показывает правильное дерево, разбор Джоша У. Комо поможет сверить первый клиентский рендер с готовым HTML и проверить структуру DOM. | 1 708 |
| 15 |  Почему React перерисовывает компоненты и как остановить каскад
Изменение состояния запускает повторный рендер компонента-владельца и его потомков. Даже если дочерний компонент не получает изменившийся count через пропсы, React выполняет его код снова: косвенную зависимость исключить нельзя.
Поэтому лишние рендеры стоит искать от владельца состояния вниз по дереву, а React DevTools использовать, чтобы увидеть причину повторной отрисовки конкретного компонента.
Если чистый потомок при одинаковых пропсах возвращает тот же интерфейс, React.memo позволяет взять предыдущий результат. В разборе Why React Re-Renders на сайте Josh W. Comeau это показано на интерактивных схемах и примерах с Counter, BigCountNumber и Decoration. | 1 734 |
| 16 | Чем заменить палитру Tailwind в проекте на обычном CSS
После отказа от Tailwind не обязательно подбирать каждый оттенок с нуля. В подборке CSS-палитр есть готовые варианты с CSS-файлами: uchū, Flexoki и Reasonable Colors. Последняя, по впечатлению автора, сфокусирована на доступности.
Если готовая палитра не подходит, там же собраны генераторы Harmonizer, tints.dev, Coolors и colorpalette.pro. Ещё один материал показывает, как функция CSS oklch() динамически создаёт цвета.
Практический сценарий: откройте подборку в начале работы над интерфейсом, сравните готовые палитры и переходите к генератору, только если нужен собственный набор оттенков. | 1 813 |
| 17 |  Как связать GSAP с WebGL и не нагружать React покадровыми обновлениями
В переходе между видео всю анимацию можно свести к числу от 0 до 1. GSAP меняет его по временной шкале, OGL передаёт значение в числовой параметр шейдера, а видеокарта по нему раскрывает блоки, искажает кадр и раздвигает цветовые каналы. Кривую движения можно заменить, не переписывая код шейдера.
Для перехода обновляются только две видеотекстуры: исходная и следующая. В эффекте под курсором автор оставил один контекст WebGL вместо нового для каждого заголовка и останавливает цикл отрисовки после 90 кадров без движения мыши.
Откройте разбор Тибо Гиньяна на Codrops, когда собираете сложную анимацию и хотите отделить её сценарий от шейдера, а покадровые изменения от состояния React. | 1 784 |
| 18 |  Как воссоздать пиксельную анимацию маскота Claude на SVG и GSAP
Автор замедлил ролики до 30% скорости, сделал скриншоты каждого кадра и примерно за четыре дня собрал четыре анимации. Персонаж состоит только из SVG-прямоугольников, без видео, GIF и контуров. React связывает компоненты с элементами, а GSAP задаёт движение и смену кадров.
Для ходьбы автор синхронизировал глаза, корпус и ноги в одной временной шкале, а clipPath обрезал ноги по линии пола при наклоне. Флаг пришлось нарисовать в 12 вариантах и переключать покадрово: между пиксельными формами нет плавного перехода.
Откройте разбор Codrops с кодом и примерами перед анимацией пиксельного персонажа: сначала определите, какие части анимировать плавно, а какие рисовать кадр за кадром. | 1 750 |
| 19 |  Как настроить разную динамику открытия и закрытия меню в GSAP
При reverse() GSAP разворачивает кривую ускорения: плавное замедление становится плавным разгоном. Поэтому мягко появившийся элемент может закрываться вяло. easeReverse задаёт обратному ходу отдельную кривую без второй анимации.
Codrops показывает это на игровом меню: обложки разлетаются от центра, а меню раскрывается через clip-path. При закрытии elastic.out(0.3) придаёт возврату другую динамику. Переключатель позволяет сравнить варианты.
Если меню можно закрыть до конца открытия, timeScale() отдельно меняет скорость обратного хода. В разборе Codrops есть код таймлайна, пересборка после смены настройки и демо. | 1 689 |
| 20 |  Как собрать плавное раскрытие галереи на GSAP MotionPath
Стопка миниатюр превращается в вертикальную ленту рядом с крупным изображением. Для каждой задаются две точки пути: промежуточная создаёт изгиб с небольшим перелётом, конечная ставит изображение на место. Высота конечной точки зависит от индекса, поэтому карточки движутся по разным дугам.
Перед анимацией код измеряет миниатюру, учитывает уменьшение масштаба и рассчитывает положение ленты. В одном сценарии GSAP кнопка скрывается, миниатюры стартуют с короткой задержкой, появляются номера и увеличивается крупное изображение.
Разбор Codrops пригодится, когда перемещение по координатам выглядит слишком прямолинейно: там есть HTML-структура, расчёты и варианты MotionPath для экспериментов. | 1 651 |
