Веб-страница
Ir al canal en Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Mostrar más
Red:📈 Análisis del canal de Telegram Веб-страница
El canal Веб-страница (@tproger_web) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 22 474 suscriptores, ocupando la posición 1 334 en la categoría Arte y diseño y el puesto 29 016 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 22 474 suscriptores.
Según los últimos datos del 15 septiembre, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -164, y en las últimas 24 horas de -4, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 12.19%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 9.61% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 2 739 visualizaciones. En el primer día suele acumular 2 160 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 4.
- Intereses temáticos: El contenido se centra en temas clave como css, javascript, html, github, браузер.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 16 septiembre, 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 Arte y diseño.
22 474
Suscriptores
-424 horas
-427 días
-16430 días
Carga de datos en curso...
Canales Similares
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
septiembre '26
septiembre '26
+42
en 8 canales
agosto '26
+70
en 9 canales
Get PRO
julio '26
+61
en 10 canales
Get PRO
junio '26
+60
en 4 canales
Get PRO
mayo '26
+107
en 1 canales
Get PRO
abril '26
+46
en 2 canales
Get PRO
marzo '26
+57
en 3 canales
Get PRO
febrero '26
+69
en 4 canales
Get PRO
enero '26
+81
en 3 canales
Get PRO
diciembre '25
+104
en 5 canales
Get PRO
noviembre '25
+105
en 3 canales
Get PRO
octubre '25
+90
en 4 canales
Get PRO
septiembre '25
+141
en 2 canales
Get PRO
agosto '25
+107
en 5 canales
Get PRO
julio '25
+216
en 5 canales
Get PRO
junio '25
+309
en 9 canales
Get PRO
mayo '25
+172
en 5 canales
Get PRO
abril '25
+105
en 4 canales
Get PRO
marzo '25
+262
en 10 canales
Get PRO
febrero '25
+256
en 8 canales
Get PRO
enero '25
+222
en 5 canales
Get PRO
diciembre '24
+142
en 6 canales
Get PRO
noviembre '24
+110
en 4 canales
Get PRO
octubre '24
+90
en 4 canales
Get PRO
septiembre '24
+83
en 4 canales
Get PRO
agosto '24
+81
en 3 canales
Get PRO
julio '24
+134
en 8 canales
Get PRO
junio '24
+121
en 13 canales
Get PRO
mayo '24
+191
en 9 canales
Get PRO
abril '24
+231
en 6 canales
Get PRO
marzo '24
+277
en 10 canales
Get PRO
febrero '24
+273
en 8 canales
Get PRO
enero '24
+211
en 3 canales
Get PRO
diciembre '23
+227
en 8 canales
Get PRO
noviembre '23
+252
en 5 canales
Get PRO
octubre '23
+169
en 6 canales
Get PRO
septiembre '23
+196
en 0 canales
Get PRO
agosto '23
+204
en 0 canales
Get PRO
julio '23
+173
en 0 canales
Get PRO
junio '23
+310
en 0 canales
Get PRO
mayo '23
+219
en 0 canales
Get PRO
abril '23
+196
en 0 canales
Get PRO
marzo '23
+375
en 0 canales
Get PRO
febrero '23
+258
en 0 canales
Get PRO
enero '23
+517
en 0 canales
Get PRO
diciembre '22
+336
en 0 canales
Get PRO
noviembre '22
+321
en 0 canales
Get PRO
octubre '22
+475
en 0 canales
Get PRO
septiembre '22
+467
en 0 canales
Get PRO
agosto '22
+924
en 0 canales
Get PRO
julio '22
+793
en 0 canales
Get PRO
junio '22
+1 038
en 0 canales
Get PRO
mayo '22
+984
en 0 canales
Get PRO
abril '22
+1 455
en 0 canales
Get PRO
marzo '22
+2 145
en 0 canales
Get PRO
febrero '22
+1 447
en 0 canales
Get PRO
enero '22
+1 720
en 0 canales
Get PRO
diciembre '21
+386
en 0 canales
Get PRO
noviembre '21
+2 050
en 0 canales
Get PRO
octubre '21
+1 542
en 0 canales
Get PRO
septiembre '21
+416
en 0 canales
Get PRO
agosto '21
+893
en 0 canales
Get PRO
julio '21
+1 205
en 0 canales
Get PRO
junio '21
+605
en 0 canales
Get PRO
mayo '21
+543
en 0 canales
Get PRO
abril '21
+3 001
en 0 canales
Get PRO
marzo '21
+430
en 0 canales
Get PRO
febrero '21
+703
en 0 canales
Get PRO
enero '21
+304
en 0 canales
Get PRO
diciembre '20
+16 536
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 16 septiembre | 0 | |||
| 15 septiembre | +3 | |||
| 14 septiembre | +6 | |||
| 13 septiembre | 0 | |||
| 12 septiembre | +2 | |||
| 11 septiembre | +1 | |||
| 10 septiembre | +5 | |||
| 09 septiembre | +2 | |||
| 08 septiembre | +4 | |||
| 07 septiembre | +5 | |||
| 06 septiembre | +1 | |||
| 05 septiembre | +1 | |||
| 04 septiembre | +5 | |||
| 03 septiembre | +3 | |||
| 02 septiembre | +2 | |||
| 01 septiembre | +2 |
Publicaciones del Canal
Repost from Сохранёнки программиста
Cloudflare автоматизировала обмен ключами с серверами сайтов
Cloudflare включила Automatic Key Exchange по умолчанию для доменов. Функция касается защищённого соединения между прокси Cloudflare и сайтом. Раньше Cloudflare начинала обмен по TLS 1.3 с X25519; при другом выборе сервера повтор добавлял полный сетевой круг.
Теперь сервис ежедневно проверяет серверы отдельно от рабочего трафика и первой предлагает сильнейший поддерживаемый алгоритм, прежде всего постквантовый X25519MLKEM768. Изменение развёртывают на части трафика и отменяют, если число повторов растёт.
При развёртывании доля повторов снизилась примерно с 52% до 3,7%, а задержка на 90-м процентиле сократилась более чем на 150 мс. Сотни тысяч доменов получили постквантовые соединения без ручной настройки. Разбор Cloudflare пригодится тем, кто отвечает за TLS: в панели можно проверить режим и ограничения по стандартам.
| 2 |  Как кэшировать HTML, CSS и JavaScript без рассинхронизации
Короткий max-age для изменяемых файлов выглядит компромиссом. Но браузер может оставить старые HTML и JavaScript, удалить CSS из кэша и запросить его заново. Если сервер уже отдаёт новые стили, страница соберётся из несовместимых версий. В тестах это легко пропустить.
Для неизменяемой статики надёжнее менять URL вместе с содержимым, например добавлять хеш, и задавать max-age=31536000. Для HTML подходит no-cache: браузер хранит ответ, но перед использованием сверяет его с сервером через ETag или Last-Modified. Название меткое: кэшировать оно как раз разрешает.
Подробный разбор кэширования пригодится перед настройкой заголовков и service worker. Проверьте, не получают ли изменяемые файлы короткий max-age, а для статики версионируйте URL. | 1 164 |
| 3 |  Почему CORS устроен именно так и как с ним работать
CORS проще отлаживать, если начать не с заголовков ответа, а с границы, которую охраняет браузер. Страница может загрузить картинку, скрипт или стиль с другого источника, но её код не может прочитать DOM чужой страницы или тело ответа. Источник здесь — сочетание схемы, хоста и порта.
Даже если не отправлять cookie, этого недостаточно. Внутренние панели, роутеры и устройства умного дома могут считать защитой саму локальную сеть, поэтому сервер должен явно разрешить чужой странице читать ответ.
Я сохранил разбор CORS с интерактивной песочницей как карту для отладки трёх слоёв: источников, учётных данных и разрешения сервера. | 1 406 |
| 4 |  Как браузер рисует кадры и где теряется плавность
Экран с частотой 60 Гц обновляется каждые 16,66 мс. С учётом работы браузера нужно уложиться в 10 мс: иначе частота кадров падает, а движение начинает дёргаться.
В разборе web.dev путь визуального изменения разделён на расчёт стилей и геометрии, отрисовку пикселей и сборку слоёв. Свойства width, height, left и top заставляют браузер пройти все эти этапы. Для цвета, фонового изображения или тени пересчёт геометрии не нужен. Если свойство не требует и новой отрисовки, браузер сразу собирает готовые слои.
Если анимация дёргается, проверьте в DevTools, какие этапы запускают её CSS-свойства. Начните с тех, что меняют размеры и положение: сокращение лишней работы освобождает время внутри кадра. | 1 439 |
| 5 |  Как INP измеряет отзывчивость веб-страницы
INP, задержка до следующей отрисовки, показывает время от клика, касания или нажатия клавиши до визуального ответа браузера. Оно складывается из ожидания обработчиков, выполнения их кода и подготовки кадра. Обычно в итог попадает самое медленное действие за визит.
Ориентир считают по 75-му процентилю отдельно для мобильных и настольных устройств: до 200 мс включительно считается хорошим результатом, свыше 200 и до 500 мс требует улучшения, свыше 500 мс означает плохую отзывчивость.
Начните с PageSpeed Insights: данные CrUX покажут оценку по реальным визитам. Затем RUM, мониторинг реальных пользователей, поможет найти медленное действие, а лабораторный тест позволит его воспроизвести. В разборе INP на web.dev объясняют, почему метрика иногда отсутствует и чем ограничены лабораторные измерения. | 1 418 |
| 6 | Как stale-while-revalidate отдаёт кэш сразу и обновляет его в фоне
Директива stale-while-revalidate в заголовке Cache-Control разрешает браузеру показать устаревшую копию без ожидания сети. Одновременно браузер запрашивает свежий ответ и сохраняет его для следующего обращения.
На примере max-age=1, stale-while-revalidate=59 механика видна по секундам: первую секунду ответ считается свежим; следующие 59 секунд браузер сразу отдаёт копию и обновляет её в фоне; позже уже ждёт сеть. Такой режим подходит данным, которые запрашивают часто и обновляют по известному расписанию, например погоде или заголовкам новостей.
Я сохранил разбор web.dev как шпаргалку для настройки API: он помогает выбрать интервалы кэширования и заранее решить, насколько устаревший ответ допустим для пользователя. | 1 433 |
| 7 | Как content-visibility ускоряет отрисовку длинных страниц
Если на странице десятки карточек, браузеру необязательно сразу рассчитывать стили и раскладку для всего списка. С content-visibility: auto он пропускает отрисовку содержимого секций за пределами экрана и выполняет её, когда секция приближается к области просмотра.
В примере с блогом время отрисовки сократилось с 232 до 30 мс. Есть цена: без заданного размера пропущенная секция считается пустой, поэтому полоса прокрутки может прыгать. contain-intrinsic-size задаёт размер-заполнитель, а значение auto позволяет затем запомнить фактический размер.
Откройте разбор на web.dev перед оптимизацией ленты или SPA: там показаны CSS-код, ограничения доступности и отличие от display: none и visibility: hidden. | 1 492 |
| 8 |  Почему гидрация React ломается при разном HTML на сервере и в браузере
При серверном рендеринге React отдаёт готовый HTML. Затем браузер гидрирует его: связывает DOM-узлы с компонентами. В этот момент React ожидает ту же структуру, что сформировал сервер, а не ищет и исправляет различия.
Поэтому проверка typeof window внутри рендера опасна. Если на сервере компонент возвращает null, а в браузере сразу добавляет навигацию, структуры HTML расходятся. Иногда React справляется, но гидрация оптимизирована ради скорости, и элементы могут оказаться не на своих местах.
Если интерфейс верен в разработке, но ломается после сборки, а React DevTools показывает правильное дерево, разбор Джоша У. Комо поможет сверить первый клиентский рендер с готовым HTML и проверить структуру DOM. | 1 623 |
| 9 |  Почему React перерисовывает компоненты и как остановить каскад
Изменение состояния запускает повторный рендер компонента-владельца и его потомков. Даже если дочерний компонент не получает изменившийся count через пропсы, React выполняет его код снова: косвенную зависимость исключить нельзя.
Поэтому лишние рендеры стоит искать от владельца состояния вниз по дереву, а React DevTools использовать, чтобы увидеть причину повторной отрисовки конкретного компонента.
Если чистый потомок при одинаковых пропсах возвращает тот же интерфейс, React.memo позволяет взять предыдущий результат. В разборе Why React Re-Renders на сайте Josh W. Comeau это показано на интерактивных схемах и примерах с Counter, BigCountNumber и Decoration. | 1 668 |
| 10 | Чем заменить палитру Tailwind в проекте на обычном CSS
После отказа от Tailwind не обязательно подбирать каждый оттенок с нуля. В подборке CSS-палитр есть готовые варианты с CSS-файлами: uchū, Flexoki и Reasonable Colors. Последняя, по впечатлению автора, сфокусирована на доступности.
Если готовая палитра не подходит, там же собраны генераторы Harmonizer, tints.dev, Coolors и colorpalette.pro. Ещё один материал показывает, как функция CSS oklch() динамически создаёт цвета.
Практический сценарий: откройте подборку в начале работы над интерфейсом, сравните готовые палитры и переходите к генератору, только если нужен собственный набор оттенков. | 1 693 |
| 11 |  Как связать GSAP с WebGL и не нагружать React покадровыми обновлениями
В переходе между видео всю анимацию можно свести к числу от 0 до 1. GSAP меняет его по временной шкале, OGL передаёт значение в числовой параметр шейдера, а видеокарта по нему раскрывает блоки, искажает кадр и раздвигает цветовые каналы. Кривую движения можно заменить, не переписывая код шейдера.
Для перехода обновляются только две видеотекстуры: исходная и следующая. В эффекте под курсором автор оставил один контекст WebGL вместо нового для каждого заголовка и останавливает цикл отрисовки после 90 кадров без движения мыши.
Откройте разбор Тибо Гиньяна на Codrops, когда собираете сложную анимацию и хотите отделить её сценарий от шейдера, а покадровые изменения от состояния React. | 1 712 |
| 12 |  Как воссоздать пиксельную анимацию маскота Claude на SVG и GSAP
Автор замедлил ролики до 30% скорости, сделал скриншоты каждого кадра и примерно за четыре дня собрал четыре анимации. Персонаж состоит только из SVG-прямоугольников, без видео, GIF и контуров. React связывает компоненты с элементами, а GSAP задаёт движение и смену кадров.
Для ходьбы автор синхронизировал глаза, корпус и ноги в одной временной шкале, а clipPath обрезал ноги по линии пола при наклоне. Флаг пришлось нарисовать в 12 вариантах и переключать покадрово: между пиксельными формами нет плавного перехода.
Откройте разбор Codrops с кодом и примерами перед анимацией пиксельного персонажа: сначала определите, какие части анимировать плавно, а какие рисовать кадр за кадром. | 1 655 |
| 13 |  Как настроить разную динамику открытия и закрытия меню в GSAP
При reverse() GSAP разворачивает кривую ускорения: плавное замедление становится плавным разгоном. Поэтому мягко появившийся элемент может закрываться вяло. easeReverse задаёт обратному ходу отдельную кривую без второй анимации.
Codrops показывает это на игровом меню: обложки разлетаются от центра, а меню раскрывается через clip-path. При закрытии elastic.out(0.3) придаёт возврату другую динамику. Переключатель позволяет сравнить варианты.
Если меню можно закрыть до конца открытия, timeScale() отдельно меняет скорость обратного хода. В разборе Codrops есть код таймлайна, пересборка после смены настройки и демо. | 1 606 |
| 14 |  Как собрать плавное раскрытие галереи на GSAP MotionPath
Стопка миниатюр превращается в вертикальную ленту рядом с крупным изображением. Для каждой задаются две точки пути: промежуточная создаёт изгиб с небольшим перелётом, конечная ставит изображение на место. Высота конечной точки зависит от индекса, поэтому карточки движутся по разным дугам.
Перед анимацией код измеряет миниатюру, учитывает уменьшение масштаба и рассчитывает положение ленты. В одном сценарии GSAP кнопка скрывается, миниатюры стартуют с короткой задержкой, появляются номера и увеличивается крупное изображение.
Разбор Codrops пригодится, когда перемещение по координатам выглядит слишком прямолинейно: там есть HTML-структура, расчёты и варианты MotionPath для экспериментов. | 1 571 |
| 15 |  Все дела подождут, потому что сегодня ваш день!
Поздравляем с Днем программиста и желаем меньше багов и больше фич, меньше созвонов и больше фокуса, меньше тасок с пометкой «срочно» и больше времени на отдых.
Забирайте подарок из нашей IT-коробки. Мы уверены, этот презент точно пригодится вам в работе: https://tprg.ru/2TAs | 1 577 |
| 16 |  Как сделать потоковый интерфейс стабильным
Чат с ИИ, лента логов и расшифровка речи меняются, пока пользователь их читает. Безусловная автопрокрутка выдёргивает его к новому тексту, а пересборка дерева элементов на каждый символ создаёт обновления, которые браузер не успеет показать.
Разбор Smashing Magazine предлагает три правки. Автопрокрутку оставляют, только пока до низа контейнера не больше 60 пикселей. Новый текст дописывают в существующий текстовый узел, а не пересоздают элементы через innerHTML. Символы собирают в буфер, а requestAnimationFrame переносит их в дерево элементов не чаще раза за кадр.
Пригодится перед реализацией чата, логов или живых метрик: сначала проверьте, можно ли спокойно прокрутить поток вверх, затем посмотрите, не прыгают ли соседние кнопки и не обновляется ли дерево элементов чаще отрисовки экрана. | 8 986 |
| 17 |  Как измерять отрисовку компонентов через Container Timing
Метрика LCP отмечает крупнейший элемент в области просмотра. Но карточка товара состоит из изображения, цены, наличия и кнопки, поэтому одна картинка не описывает её отрисовку.
Container Timing помечает атрибутом containertiming область DOM. Через PerformanceObserver браузер сообщает, когда текст или изображение впервые занимают ещё не учтённую её часть. Так видны первое содержимое и этапы отрисовки.
API не сообщает, что компонент готов: позже могут появиться новые данные. Границу выбирает приложение, например последнюю запись перед первым действием пользователя. В разборе Гарри Робертса на CSS Wizardry есть код настройки, варианты границ и ограничения, а также подключение к origin trial Chrome. | 1 599 |
| 18 |  Как читать ввод геймпада в JavaScript и находить дрейф стиков
Gamepad API прост, но первая проверка может объявить неисправный контроллер здоровым. Chromium держит значение оси на нуле, пока хотя бы раз не увидит её около центра: по модулю меньше 0,1. Поэтому сильный дрейф может оставаться скрытым сколько угодно.
Есть и вторая ловушка: navigator.getGamepads() возвращает снимок состояния. Его нужно вызывать заново в каждом кадре requestAnimationFrame, а пустые ячейки массива пропускать.
Я сохранил практический разбор freeCodeCamp как чеклист для браузерного тестера. После подключения попросите пользователя провести стики через центр, дождитесь ненулевого значения каждой оси и только затем ищите дрейф. Без контроллера опрашивайте API редко, после подключения переходите к каждому кадру. | 2 550 |
| 19 |  Sin texto... | 11 243 |
| 20 |  Sin texto... | 11 608 |
