Веб-страница
الذهاب إلى القناة على Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
إظهار المزيد
الشبكة:📈 نظرة تحليلية على قناة تيليجرام Веб-страница
تُعد قناة Веб-страница (@tproger_web) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 22 474 مشتركاً، محتلاً المرتبة 1 334 في فئة الفن والتصميم والمرتبة 29 016 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 22 474 مشتركاً.
بحسب آخر البيانات بتاريخ 15 سبتمبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -164، وفي آخر 24 ساعة بمقدار -4، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 12.19%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 9.61% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 2 739 مشاهدة. وخلال اليوم الأول يجمع عادةً 2 160 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 4.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل css, javascript, html, github, браузер.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 16 سبتمبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة الفن والتصميم.
22 474
المشتركون
-424 ساعات
-427 أيام
-16430 أيام
جاري تحميل البيانات...
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
سبتمبر '26
سبتمبر '26
+42
في 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 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 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 |
منشورات القناة
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 |  لا يوجد نص... | 11 243 |
| 20 |  لا يوجد نص... | 11 608 |
